<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/links.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:35 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=text-level-semantics.html>← 4.5 Text-level semantics</a> — <a href=index.html>Table of Contents</a> — <a href=edits.html>4.7 Edits →</a></nav><ol class=toc><li id=toc-semantics><ol><li><a href=links.html#links><span class=secno>4.6</span> Links</a><ol><li><a href=links.html#introduction-2><span class=secno>4.6.1</span> Introduction</a><li><a href=links.html#links-created-by-a-and-area-elements><span class=secno>4.6.2</span> Links created by <code>a</code> and <code>area</code> elements</a><li><a href=links.html#api-for-a-and-area-elements><span class=secno>4.6.3</span> API for <code>a</code> and <code>area</code> elements</a><li><a href=links.html#following-hyperlinks><span class=secno>4.6.4</span> Following hyperlinks</a><li><a href=links.html#downloading-resources><span class=secno>4.6.5</span> Downloading resources</a><li><a href=links.html#hyperlink-auditing><span class=secno>4.6.6</span> Hyperlink auditing</a><ol><li><a href=links.html#the-ping-headers><span class=secno>4.6.6.1</span> The `<code>Ping-From</code>` and `<code>Ping-To</code>` headers</a></ol><li><a href=links.html#linkTypes><span class=secno>4.6.7</span> Link types</a><ol><li><a href=links.html#rel-alternate><span class=secno>4.6.7.1</span> Link type "<code>alternate</code>"</a><li><a href=links.html#link-type-author><span class=secno>4.6.7.2</span> Link type "<code>author</code>"</a><li><a href=links.html#link-type-bookmark><span class=secno>4.6.7.3</span> Link type "<code>bookmark</code>"</a><li><a href=links.html#link-type-canonical><span class=secno>4.6.7.4</span> Link type "<code>canonical</code>"</a><li><a href=links.html#link-type-dns-prefetch><span class=secno>4.6.7.5</span> Link type "<code>dns-prefetch</code>"</a><li><a href=links.html#link-type-expect><span class=secno>4.6.7.6</span> Link type "<code>expect</code>"</a><li><a href=links.html#link-type-external><span class=secno>4.6.7.7</span> Link type "<code>external</code>"</a><li><a href=links.html#link-type-help><span class=secno>4.6.7.8</span> Link type "<code>help</code>"</a><li><a href=links.html#rel-icon><span class=secno>4.6.7.9</span> Link type "<code>icon</code>"</a><li><a href=links.html#link-type-license><span class=secno>4.6.7.10</span> Link type "<code>license</code>"</a><li><a href=links.html#link-type-manifest><span class=secno>4.6.7.11</span> Link type "<code>manifest</code>"</a><li><a href=links.html#link-type-modulepreload><span class=secno>4.6.7.12</span> Link type "<code>modulepreload</code>"</a><li><a href=links.html#link-type-nofollow><span class=secno>4.6.7.13</span> Link type "<code>nofollow</code>"</a><li><a href=links.html#link-type-noopener><span class=secno>4.6.7.14</span> Link type "<code>noopener</code>"</a><li><a href=links.html#link-type-noreferrer><span class=secno>4.6.7.15</span> Link type "<code>noreferrer</code>"</a><li><a href=links.html#link-type-opener><span class=secno>4.6.7.16</span> Link type "<code>opener</code>"</a><li><a href=links.html#link-type-pingback><span class=secno>4.6.7.17</span> Link type "<code>pingback</code>"</a><li><a href=links.html#link-type-preconnect><span class=secno>4.6.7.18</span> Link type "<code>preconnect</code>"</a><li><a href=links.html#link-type-prefetch><span class=secno>4.6.7.19</span> Link type "<code>prefetch</code>"</a><li><a href=links.html#link-type-preload><span class=secno>4.6.7.20</span> Link type "<code>preload</code>"</a><li><a href=links.html#link-type-privacy-policy><span class=secno>4.6.7.21</span> Link type "<code>privacy-policy</code>"</a><li><a href=links.html#link-type-search><span class=secno>4.6.7.22</span> Link type "<code>search</code>"</a><li><a href=links.html#link-type-stylesheet><span class=secno>4.6.7.23</span> Link type "<code>stylesheet</code>"</a><li><a href=links.html#link-type-tag><span class=secno>4.6.7.24</span> Link type "<code>tag</code>"</a><li><a href=links.html#link-type-terms-of-service><span class=secno>4.6.7.25</span> Link Type "<code>terms-of-service</code>"</a><li><a href=links.html#sequential-link-types><span class=secno>4.6.7.26</span> Sequential link types</a><ol><li><a href=links.html#link-type-next><span class=secno>4.6.7.26.1</span> Link type "<code>next</code>"</a><li><a href=links.html#link-type-prev><span class=secno>4.6.7.26.2</span> Link type "<code>prev</code>"</a></ol><li><a href=links.html#other-link-types><span class=secno>4.6.7.27</span> Other link types</a></ol></ol></ol></ol><h3 id=links><span class=secno>4.6</span> Links<a href=#links class=self-link></a></h3>

  <h4 id=introduction-2><span class=secno>4.6.1</span> Introduction<a href=#introduction-2 class=self-link></a></h4>

  <p>Links are a conceptual construct, created by <code id=introduction-2:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=introduction-2:the-area-element><a href=image-maps.html#the-area-element>area</a></code>,
  <code id=introduction-2:the-form-element><a href=forms.html#the-form-element>form</a></code>, and <code id=introduction-2:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements, that <a href=dom.html#represents id=introduction-2:represents>represent</a>
  a connection between two resources, one of which is the current <code id=introduction-2:document><a href=dom.html#document>Document</a></code>. There are
  three kinds of links in HTML:</p>

  <dl><dt><dfn id=external-resource-link data-lt="external resource link" data-export="">Links to
   external resources</dfn><dd><p>These are links to resources that are to be used to augment the current document,
   generally automatically processed by the user agent. All <a href=#external-resource-link id=introduction-2:external-resource-link>external resource links</a> have a <a id=introduction-2:fetch-and-process-the-linked-resource href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a>
   algorithm which describes how the resource is obtained.<dt><dfn id=hyperlink data-lt=hyperlink data-export="">Hyperlinks</dfn><dd><p>These are links to other resources that are generally exposed to the user by the user
   agent so that the user can cause the user agent to <a id=introduction-2:navigate href=browsing-the-web.html#navigate>navigate</a> to those resources, e.g.
   to visit them in a browser or download them.<dt><dfn id=internal-resource-link data-export="">Internal resource links</dfn><dd><p>These are links to resources within the current document, used to give those resources
   special meaning or behavior.</dl>

  <p>For <code id=introduction-2:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements with an <code id=introduction-2:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute and a
  <code id=introduction-2:attr-link-rel><a href=semantics.html#attr-link-rel>rel</a></code> attribute, links must be created for the keywords of the
  <code id=introduction-2:attr-link-rel-2><a href=semantics.html#attr-link-rel>rel</a></code> attribute, as defined for those keywords in the <a href=#linkTypes>link types</a> section.</p>

  <p>Similarly, for <code id=introduction-2:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=introduction-2:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements with an <code id=introduction-2:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute and a <code id=introduction-2:attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute, links must be created for the keywords of the
  <code id=introduction-2:attr-hyperlink-rel-2><a href=#attr-hyperlink-rel>rel</a></code> attribute as defined for those keywords in the <a href=#linkTypes>link types</a> section. Unlike <code id=introduction-2:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> elements, however,
  <code id=introduction-2:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=introduction-2:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements with an <code id=introduction-2:attr-hyperlink-href-2><a href=#attr-hyperlink-href>href</a></code>
  attribute that either do not have a <code id=introduction-2:attr-hyperlink-rel-3><a href=#attr-hyperlink-rel>rel</a></code> attribute, or
  whose <code id=introduction-2:attr-hyperlink-rel-4><a href=#attr-hyperlink-rel>rel</a></code> attribute has no keywords that are defined as
  specifying <a href=#hyperlink id=introduction-2:hyperlink>hyperlinks</a>, must also create a <a href=#hyperlink id=introduction-2:hyperlink-2>hyperlink</a>.
  This implied hyperlink has no special meaning (it has no <a href=#linkTypes>link type</a>)
  beyond linking the element's <a id=introduction-2:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> to the resource given by the element's <code id=introduction-2:attr-hyperlink-href-3><a href=#attr-hyperlink-href>href</a></code> attribute.</p>

  <p>Similarly, for <code id=introduction-2:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements with a <code id=introduction-2:attr-form-rel><a href=forms.html#attr-form-rel>rel</a></code>
  attribute, links must be created for the keywords of the <code id=introduction-2:attr-form-rel-2><a href=forms.html#attr-form-rel>rel</a></code>
  attribute as defined for those keywords in the <a href=#linkTypes>link types</a> section.
  <code id=introduction-2:the-form-element-3><a href=forms.html#the-form-element>form</a></code> elements that do not have a <code id=introduction-2:attr-form-rel-3><a href=forms.html#attr-form-rel>rel</a></code> attribute,
  or whose <code id=introduction-2:attr-form-rel-4><a href=forms.html#attr-form-rel>rel</a></code> attribute has no keywords that are defined as
  specifying <a href=#hyperlink id=introduction-2:hyperlink-3>hyperlinks</a>, must also create a <a href=#hyperlink id=introduction-2:hyperlink-4>hyperlink</a>.

  <p>A <a href=#hyperlink id=introduction-2:hyperlink-5>hyperlink</a> can have one or more <dfn id=hyperlink-annotation>hyperlink
  annotations</dfn> that modify the processing semantics of that hyperlink.</p>


  <h4 id=links-created-by-a-and-area-elements><span class=secno>4.6.2</span> Links created by <code id=links-created-by-a-and-area-elements:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=links-created-by-a-and-area-elements:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements<a href=#links-created-by-a-and-area-elements class=self-link></a></h4>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-href data-dfn-type=element-attr><code>href</code></dfn>
  attribute on <code id=links-created-by-a-and-area-elements:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=links-created-by-a-and-area-elements:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements must have a value that is a <a id=links-created-by-a-and-area-elements:valid-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid
  URL potentially surrounded by spaces</a>.</p>

  <p class=note>The <code id=links-created-by-a-and-area-elements:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute on <code id=links-created-by-a-and-area-elements:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> and
  <code id=links-created-by-a-and-area-elements:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements is not required; when those elements do not have <code id=links-created-by-a-and-area-elements:attr-hyperlink-href-2><a href=#attr-hyperlink-href>href</a></code> attributes they do not create hyperlinks.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-target data-dfn-type=element-attr><code>target</code></dfn>
  attribute, if present, must be a <a id=links-created-by-a-and-area-elements:valid-navigable-target-name-or-keyword href=document-sequences.html#valid-navigable-target-name-or-keyword>valid navigable target name or keyword</a>. It gives the
  name of the <a id=links-created-by-a-and-area-elements:navigable href=document-sequences.html#navigable>navigable</a> that will be used. User agents use this
  name when <a href=#following-hyperlinks-2 id=links-created-by-a-and-area-elements:following-hyperlinks-2>following hyperlinks</a>.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-download data-dfn-type=element-attr><code>download</code></dfn>
  attribute, if present, indicates that the author intends the hyperlink to be used for <a href=#downloading-hyperlinks id=links-created-by-a-and-area-elements:downloading-hyperlinks>downloading a resource</a>. The attribute may have a value; the
  value, if any, specifies the default filename that the author recommends for use in labeling the
  resource in a local file system. There are no restrictions on allowed values, but authors are
  cautioned that most file systems have limitations with regard to what punctuation is supported in
  filenames, and user agents are likely to adjust filenames accordingly.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-ping title="The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.">Element/a#attr-ping</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 1+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>12+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=a,area id=ping data-dfn-type=element-attr><code>ping</code></dfn> attribute, if present, gives the URLs of the
  resources that are interested in being notified if the user follows the hyperlink. The value must
  be a <a id=links-created-by-a-and-area-elements:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a>, each of which must be a <a id=links-created-by-a-and-area-elements:valid-non-empty-url href=urls-and-fetching.html#valid-non-empty-url>valid non-empty
  URL</a> whose <a href=https://url.spec.whatwg.org/#concept-url-scheme id=links-created-by-a-and-area-elements:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is an <a id=links-created-by-a-and-area-elements:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S)
  scheme</a>. The value is used by the user agent for <a href=#hyperlink-auditing id=links-created-by-a-and-area-elements:hyperlink-auditing>hyperlink
  auditing</a>.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-rel data-dfn-type=element-attr><code>rel</code></dfn> attribute on <code id=links-created-by-a-and-area-elements:the-a-element-4><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=links-created-by-a-and-area-elements:the-area-element-4><a href=image-maps.html#the-area-element>area</a></code>
  elements controls what kinds of links the elements create. The attribute's value must be an
  <a id=links-created-by-a-and-area-elements:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The <a href=#linkTypes>allowed
  keywords and their meanings</a> are defined below.</p>

  <p><code id=links-created-by-a-and-area-elements:attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=links-created-by-a-and-area-elements:concept-supported-tokens data-x-internal=concept-supported-tokens>supported tokens</a> are the keywords defined in <a href=#linkTypes>HTML link types</a> which are allowed on <code id=links-created-by-a-and-area-elements:the-a-element-5><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=links-created-by-a-and-area-elements:the-area-element-5><a href=image-maps.html#the-area-element>area</a></code>
  elements, impact the processing model, and are supported by the user agent. The possible <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=links-created-by-a-and-area-elements:concept-supported-tokens-2 data-x-internal=concept-supported-tokens>supported tokens</a> are <code id=links-created-by-a-and-area-elements:link-type-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code>, <code id=links-created-by-a-and-area-elements:link-type-noopener><a href=#link-type-noopener>noopener</a></code>, and <code id=links-created-by-a-and-area-elements:link-type-opener><a href=#link-type-opener>opener</a></code>. <code id=links-created-by-a-and-area-elements:attr-hyperlink-rel-2><a href=#attr-hyperlink-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=links-created-by-a-and-area-elements:concept-supported-tokens-3 data-x-internal=concept-supported-tokens>supported tokens</a> must only include the tokens from this
  list that the user agent implements the processing model for.</p>

  <p>The <code id=links-created-by-a-and-area-elements:attr-hyperlink-rel-3><a href=#attr-hyperlink-rel>rel</a></code> attribute has no default value. If the
  attribute is omitted or if none of the values in the attribute are recognized by the user agent,
  then the document has no particular relationship with the destination resource other than there
  being a hyperlink between the two.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-hreflang data-dfn-type=element-attr><code>hreflang</code></dfn>
  attribute on <code id=links-created-by-a-and-area-elements:the-a-element-6><a href=text-level-semantics.html#the-a-element>a</a></code> elements that create <a href=#hyperlink id=links-created-by-a-and-area-elements:hyperlink>hyperlinks</a>, if
  present, gives the language of the linked resource. It is purely advisory. The value must be a
  valid BCP 47 language tag. <a href=references.html#refsBCP47>[BCP47]</a> User agents must not consider this
  attribute authoritative — upon fetching the resource, user agents must use only language
  information associated with the resource to determine its language, not metadata included in the
  link to the resource.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-type data-dfn-type=element-attr><code>type</code></dfn>
  attribute, if present, gives the <a id=links-created-by-a-and-area-elements:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> of the linked resource. It is purely
  advisory. The value must be a <a id=links-created-by-a-and-area-elements:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>. User agents must
  not consider the <code id=links-created-by-a-and-area-elements:attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attribute authoritative —
  upon fetching the resource, user agents must not use metadata included in the link to the resource
  to determine its type.</p>

  <p>The <dfn data-dfn-for=a,area id=attr-hyperlink-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=links-created-by-a-and-area-elements:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer
  policy attribute</a>. Its purpose is to set the <a id=links-created-by-a-and-area-elements:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used when
  <a href=#following-hyperlinks-2 id=links-created-by-a-and-area-elements:following-hyperlinks-2-2>following hyperlinks</a>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <hr>

  <p>When an <code id=links-created-by-a-and-area-elements:the-a-element-7><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=links-created-by-a-and-area-elements:the-area-element-6><a href=image-maps.html#the-area-element>area</a></code> element's <a id=links-created-by-a-and-area-elements:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> is
  invoked, the user agent may allow the user to indicate a preference regarding whether the
  hyperlink is to be used for <a href=browsing-the-web.html#navigate id=links-created-by-a-and-area-elements:navigate>navigation</a> or whether the resource it
  specifies is to be downloaded.</p>

  <p>In the absence of a user preference, the default should be navigation if the element has no
  <code id=links-created-by-a-and-area-elements:attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute, and should be to download the
  specified resource if it does.</p>

  <p>The <a id=links-created-by-a-and-area-elements:activation-behaviour-2 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> of an <code id=links-created-by-a-and-area-elements:the-a-element-8><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=links-created-by-a-and-area-elements:the-area-element-7><a href=image-maps.html#the-area-element>area</a></code> element
  <var>element</var> given an event <var>event</var> is:</p>

  <ol><li><p>If <var>element</var> has no <code id=links-created-by-a-and-area-elements:attr-hyperlink-href-3><a href=#attr-hyperlink-href>href</a></code> attribute,
   then return.<li><p>Let <var>hyperlinkSuffix</var> be null.<li><p>If <var>element</var> is an <code id=links-created-by-a-and-area-elements:the-a-element-9><a href=text-level-semantics.html#the-a-element>a</a></code> element, and <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=links-created-by-a-and-area-elements:concept-event-target data-x-internal=concept-event-target>target</a> is an <code id=links-created-by-a-and-area-elements:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> with an <code id=links-created-by-a-and-area-elements:attr-img-ismap><a href=embedded-content.html#attr-img-ismap>ismap</a></code> attribute specified, then:</p>

    <ol><li><p>Let <var>x</var> and <var>y</var> be 0.<li><p>If <var>event</var>'s <code id=links-created-by-a-and-area-elements:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> attribute is
     initialized to true, then set <var>x</var> to the distance in <a href=https://drafts.csswg.org/css-values/#px id="links-created-by-a-and-area-elements:'px'" data-x-internal="'px'">CSS
     pixels</a> from the left edge of the image to the location of the click, and set
     <var>y</var> to the distance in <a href=https://drafts.csswg.org/css-values/#px id="links-created-by-a-and-area-elements:'px'-2" data-x-internal="'px'">CSS pixels</a> from the top edge of the
     image to the location of the click.<li><p>If <var>x</var> is negative, set <var>x</var> to 0.<li><p>If <var>y</var> is negative, set <var>y</var> to 0.<li><p>Set <var>hyperlinkSuffix</var> to the concatenation of U+003F (?), the value of
     <var>x</var> expressed as a base-ten integer using <a id=links-created-by-a-and-area-elements:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>, U+002C (,), and
     the value of <var>y</var> expressed as a base-ten integer using <a id=links-created-by-a-and-area-elements:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII
     digits</a>.</ol>
   <li><p>Let <var>userInvolvement</var> be <var>event</var>'s <a href=browsing-the-web.html#event-uni id=links-created-by-a-and-area-elements:event-uni>user
   navigation involvement</a>.<li>
    <p>If the user has expressed a preference to download the hyperlink, then set
    <var>userInvolvement</var> to "<code id=links-created-by-a-and-area-elements:uni-browser-ui><a href=browsing-the-web.html#uni-browser-ui>browser UI</a></code>".</p>

    <p class=note>That is, if the user has expressed a specific preference for downloading, this
    no longer counts as merely "<code id=links-created-by-a-and-area-elements:uni-activation><a href=browsing-the-web.html#uni-activation>activation</a></code>".</p>
   <li><p>If <var>element</var> has a <code id=links-created-by-a-and-area-elements:attr-hyperlink-download-2><a href=#attr-hyperlink-download>download</a></code>
   attribute, or if the user has expressed a preference to download the hyperlink, then <a href=#downloading-hyperlinks id=links-created-by-a-and-area-elements:downloading-hyperlinks-2>download the hyperlink</a> created by <var>element</var> with
   <i id=links-created-by-a-and-area-elements:downloading-hyperlinksuffix><a href=#downloading-hyperlinksuffix>hyperlinkSuffix</a></i> set to <var>hyperlinkSuffix</var> and
   <i id=links-created-by-a-and-area-elements:downloading-userinvolvement><a href=#downloading-userinvolvement>userInvolvement</a></i> set to
   <var>userInvolvement</var>.<li><p>Otherwise, <a href=#following-hyperlinks-2 id=links-created-by-a-and-area-elements:following-hyperlinks-2-3>follow the hyperlink</a> created by
   <var>element</var> with <i id=links-created-by-a-and-area-elements:following-hyperlinksuffix><a href=#following-hyperlinksuffix>hyperlinkSuffix</a></i> set to
   <var>hyperlinkSuffix</var> and <i id=links-created-by-a-and-area-elements:following-userinvolvement><a href=#following-userinvolvement>userInvolvement</a></i> set to
   <var>userInvolvement</var>.</ol>


  <h4 id=api-for-a-and-area-elements><span class=secno>4.6.3</span> API for <code id=api-for-a-and-area-elements:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=api-for-a-and-area-elements:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements<a href=#api-for-a-and-area-elements class=self-link></a></h4>

  <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='htmlhyperlinkelementutils' data-dfn-type='interface'><c- g>HTMLHyperlinkElementUtils</c-></dfn> {
  [<a id='api-for-a-and-area-elements:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='api-for-a-and-area-elements:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>stringifier</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-href' id='api-for-a-and-area-elements:dom-hyperlink-href'><c- g>href</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-origin' id='api-for-a-and-area-elements:dom-hyperlink-origin'><c- g>origin</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-protocol' id='api-for-a-and-area-elements:dom-hyperlink-protocol'><c- g>protocol</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-username' id='api-for-a-and-area-elements:dom-hyperlink-username'><c- g>username</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-password' id='api-for-a-and-area-elements:dom-hyperlink-password'><c- g>password</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-host' id='api-for-a-and-area-elements:dom-hyperlink-host'><c- g>host</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-hostname' id='api-for-a-and-area-elements:dom-hyperlink-hostname'><c- g>hostname</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-port' id='api-for-a-and-area-elements:dom-hyperlink-port'><c- g>port</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-pathname' id='api-for-a-and-area-elements:dom-hyperlink-pathname'><c- g>pathname</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-search' id='api-for-a-and-area-elements:dom-hyperlink-search'><c- g>search</c-></a>;
  [<a id='api-for-a-and-area-elements:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-hyperlink-hash' id='api-for-a-and-area-elements:dom-hyperlink-hash'><c- g>hash</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>hyperlink</var>.<span>toString()</span></code><dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-href id=dom-hyperlink-href-dev>href</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href title="The HTMLAnchorElement.href property is a stringifier that returns a string containing the whole URL, and allows the href to be updated.">HTMLAnchorElement/href</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/toString title="The HTMLAnchorElement.toString() stringifier method returns a string containing the whole URL. It is a read-only version of HTMLAnchorElement.href.">HTMLAnchorElement/toString</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>52+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/href title="The HTMLAreaElement.href property is a stringifier that returns a string containing the whole URL, and allows the href to be updated.">HTMLAreaElement/href</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/toString title="The HTMLAreaElement.toString() stringifier method returns a string containing the whole URL. It is a read-only version of HTMLAreaElement.href.">HTMLAreaElement/toString</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL.</p>

    <p>Can be set, to change the URL.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-origin id=dom-hyperlink-origin-dev>origin</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/origin title="The HTMLAnchorElement.origin read-only property is a string containing the Unicode serialization of the origin of the represented URL.">HTMLAnchorElement/origin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/origin title="The HTMLAreaElement.origin read-only property is a string containing the Unicode serialization of the origin of the represented URL.">HTMLAreaElement/origin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the hyperlink's URL's origin.<dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-protocol id=dom-hyperlink-protocol-dev>protocol</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/protocol title="The HTMLAnchorElement.protocol property is a string representing the protocol scheme of the URL, including the final ':'.">HTMLAnchorElement/protocol</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/protocol title="The HTMLAreaElement.protocol property is a string representing the protocol scheme of the URL, including the final ':'.">HTMLAreaElement/protocol</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's scheme.</p>

    <p>Can be set, to change the URL's scheme.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-username id=dom-hyperlink-username-dev>username</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username title="The HTMLAnchorElement.username property is a string containing the username specified before the domain name.">HTMLAnchorElement/username</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/username title="The HTMLAreaElement.username property is a string containing the username specified before the domain name.">HTMLAreaElement/username</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's username.</p>

    <p>Can be set, to change the URL's username.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-password id=dom-hyperlink-password-dev>password</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password title="The HTMLAnchorElement.password property is a string containing the password specified before the domain name.">HTMLAnchorElement/password</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/password title="The HTMLAreaElement.password property is a string containing the password specified before the domain name.">HTMLAreaElement/password</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's password.</p>

    <p>Can be set, to change the URL's password.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-host id=dom-hyperlink-host-dev>host</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/host title="The HTMLAnchorElement.host property is a string containing the host, that is the hostname, and then, if the port of the URL is nonempty, a ':', and the port of the URL.">HTMLAnchorElement/host</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/host title="The HTMLAreaElement.host property is a string containing the host, that is the hostname, and then, if the port of the URL is nonempty, a ':', and the port of the URL.">HTMLAreaElement/host</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's host and port (if different from the default port for the
    scheme).</p>

    <p>Can be set, to change the URL's host and port.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-hostname id=dom-hyperlink-hostname-dev>hostname</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hostname title="The HTMLAnchorElement.hostname property is a string containing the domain of the URL.">HTMLAnchorElement/hostname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/hostname title="The HTMLAreaElement.hostname property is a string containing the domain of the URL.">HTMLAreaElement/hostname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's host.</p>

    <p>Can be set, to change the URL's host.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-port id=dom-hyperlink-port-dev>port</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/port title="The HTMLAnchorElement.port property is a string containing the port number of the URL. If the URL does not contain an explicit port number, it will be set to ''.">HTMLAnchorElement/port</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/port title="The HTMLAreaElement.port property is a string containing the port number of the URL. If the URL does not contain an explicit port number, it will be set to ''.">HTMLAreaElement/port</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's port.</p>

    <p>Can be set, to change the URL's port.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-pathname id=dom-hyperlink-pathname-dev>pathname</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/pathname title="The HTMLAnchorElement.pathname property is a string containing an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path).">HTMLAnchorElement/pathname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/pathname title="The HTMLAreaElement.pathname property is a string containing an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path).">HTMLAreaElement/pathname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's path.</p>

    <p>Can be set, to change the URL's path.</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-search id=dom-hyperlink-search-dev>search</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/search title="The HTMLAnchorElement.search property is a search string, also called a query string, that is a string containing a '?' followed by the parameters of the URL.">HTMLAnchorElement/search</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/search title="The HTMLAreaElement.search property is a search string, also called a query string, that is a string containing a '?' followed by the parameters of the URL.">HTMLAreaElement/search</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's query (includes leading "<code>?</code>" if
    non-empty).</p>

    <p>Can be set, to change the URL's query (ignores leading "<code>?</code>").</p>
   <dt><code><var>hyperlink</var>.<a href=#dom-hyperlink-hash id=dom-hyperlink-hash-dev>hash</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash title="The HTMLAnchorElement.hash property returns a string containing a '#' followed by the fragment identifier of the URL.">HTMLAnchorElement/hash</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/hash title="The HTMLAreaElement.hash property returns a string containing a '#' followed by the fragment identifier of the URL.">HTMLAreaElement/hash</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the hyperlink's URL's fragment (includes leading "<code>#</code>" if
    non-empty).</p>

    <p>Can be set, to change the URL's fragment (ignores leading "<code>#</code>").</p>
   </dl>

  

  <p>An element implementing the <code id=api-for-a-and-area-elements:htmlhyperlinkelementutils><a href=#htmlhyperlinkelementutils>HTMLHyperlinkElementUtils</a></code> mixin has an associated <dfn id=concept-hyperlink-url>url</dfn> (null or a <a id=api-for-a-and-area-elements:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>). It is initially null.

  <p>An element implementing the <code id=api-for-a-and-area-elements:htmlhyperlinkelementutils-2><a href=#htmlhyperlinkelementutils>HTMLHyperlinkElementUtils</a></code> mixin has an associated <dfn id=concept-hyperlink-url-set>set the url</dfn> algorithm, which runs these steps:</p>

  <ol><li><p>Set this element's <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url>url</a> to null.<li><p>If this element's <code id=api-for-a-and-area-elements:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute is
   absent, then return.<li><p>Let <var>url</var> be the result of <a id=api-for-a-and-area-elements:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given this
   element's <code id=api-for-a-and-area-elements:attr-hyperlink-href-2><a href=#attr-hyperlink-href>href</a></code> content attribute's value, relative to
   this element's <a id=api-for-a-and-area-elements:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>url</var> is not failure, then set this element's <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-2>url</a> to <var>url</var>.</ol>

  <p>When elements implementing the <code id=api-for-a-and-area-elements:htmlhyperlinkelementutils-3><a href=#htmlhyperlinkelementutils>HTMLHyperlinkElementUtils</a></code> mixin are created, the
  user agent must <a href=#concept-hyperlink-url-set id=api-for-a-and-area-elements:concept-hyperlink-url-set>set the url</a>.</p>

  <p>The <a id=api-for-a-and-area-elements:html-element-insertion-steps href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a> for <code id=api-for-a-and-area-elements:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=api-for-a-and-area-elements:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code>
  elements, given <var>insertedNode</var>, are:</p>

  <ol><li><p>If <var>insertedNode</var> is not <a id=api-for-a-and-area-elements:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li><p><a id=api-for-a-and-area-elements:consider-speculative-loads href=speculative-loading.html#consider-speculative-loads>Consider speculative loads</a> given <var>insertedNode</var>'s <a id=api-for-a-and-area-elements:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.</ol>

  <p>The <a id=api-for-a-and-area-elements:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> for <code id=api-for-a-and-area-elements:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=api-for-a-and-area-elements:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements,
  given <var>removedNode</var> and <var>oldParent</var>, are:</p>

  <ol><li><p>If <var>oldParent</var> is not <a id=api-for-a-and-area-elements:connected-2 href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li><p><a id=api-for-a-and-area-elements:consider-speculative-loads-2 href=speculative-loading.html#consider-speculative-loads>Consider speculative loads</a> given <var>oldParent</var>'s <a id=api-for-a-and-area-elements:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.</ol>

  <p>The <a id=api-for-a-and-area-elements:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a> for <code id=api-for-a-and-area-elements:the-a-element-4><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=api-for-a-and-area-elements:the-area-element-4><a href=image-maps.html#the-area-element>area</a></code> elements,
  given <var>movedNode</var>, are:</p>

  <ol><li><p><a id=api-for-a-and-area-elements:consider-speculative-loads-3 href=speculative-loading.html#consider-speculative-loads>Consider speculative loads</a> given <var>movedNode</var>'s <a id=api-for-a-and-area-elements:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.</ol>

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=api-for-a-and-area-elements:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
  <var>value</var>, and <var>namespace</var>, are used for all <code id=api-for-a-and-area-elements:the-a-element-5><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=api-for-a-and-area-elements:the-area-element-5><a href=image-maps.html#the-area-element>area</a></code>
  elements:</p>

  <ol><li><p>If <var>namespace</var> is not null, then return.<li><p>If <var>oldValue</var> equals <var>value</var>, then return.<li>
    <p>If <var>localName</var> is <code id=api-for-a-and-area-elements:attr-hyperlink-href-3><a href=#attr-hyperlink-href>href</a></code>, then <a href=#concept-hyperlink-url-set id=api-for-a-and-area-elements:concept-hyperlink-url-set-2>set the url</a> given <var>element</var>.</p>

    <p class=note>This is only observable for <code id=api-for-a-and-area-elements:blob-protocol><a data-x-internal=blob-protocol href=https://w3c.github.io/FileAPI/#DefinitionOfScheme>blob:</a></code> URLs as
    <a href=https://url.spec.whatwg.org/#concept-url-parser id=api-for-a-and-area-elements:url-parser data-x-internal=url-parser>parsing</a> them involves a <a id=api-for-a-and-area-elements:blob-url-store href=https://w3c.github.io/FileAPI/#BlobURLStore data-x-internal=blob-url-store>Blob URL Store</a> lookup.</p>
   <li><p>If <var>localName</var> is <code id=api-for-a-and-area-elements:attr-hyperlink-href-4><a href=#attr-hyperlink-href>href</a></code>, <code id=api-for-a-and-area-elements:attr-hyperlink-referrerpolicy><a href=#attr-hyperlink-referrerpolicy>referrerpolicy</a></code>, or <code id=api-for-a-and-area-elements:attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, then <a id=api-for-a-and-area-elements:consider-speculative-loads-4 href=speculative-loading.html#consider-speculative-loads>consider speculative loads</a> given
   <var>element</var>'s <a id=api-for-a-and-area-elements:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.</ol>

  <p>An element implementing the <code id=api-for-a-and-area-elements:htmlhyperlinkelementutils-4><a href=#htmlhyperlinkelementutils>HTMLHyperlinkElementUtils</a></code> mixin has an associated
  <dfn id=reinitialise-url>reinitialize url</dfn> algorithm, which runs these
  steps:</p>

  <ol><li><p>If the element's <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-3>url</a> is non-null, its <a href=https://url.spec.whatwg.org/#concept-url-scheme id=api-for-a-and-area-elements:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is "<code>blob</code>", and it has an
   <a id=api-for-a-and-area-elements:opaque-path href=https://url.spec.whatwg.org/#url-opaque-path data-x-internal=opaque-path>opaque path</a>, then terminate these steps.<li><p><a href=#concept-hyperlink-url-set id=api-for-a-and-area-elements:concept-hyperlink-url-set-3>Set the url</a>.</ol>

  <p>To <dfn id=update-href>update <code>href</code></dfn>, set the element's <code id=api-for-a-and-area-elements:attr-hyperlink-href-5><a href=#attr-hyperlink-href>href</a></code> content attribute's value to the element's <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-4>url</a>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=api-for-a-and-area-elements:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-href data-dfn-type=attribute><code>href</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-5>url</a>.<li><p>If <var>url</var> is null and <a id=api-for-a-and-area-elements:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> has no <code id=api-for-a-and-area-elements:attr-hyperlink-href-6><a href=#attr-hyperlink-href>href</a></code> content attribute, return the empty string.

   <li><p>Otherwise, if <var>url</var> is null, return <a id=api-for-a-and-area-elements:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=api-for-a-and-area-elements:attr-hyperlink-href-7><a href=#attr-hyperlink-href>href</a></code> content attribute's value.<li><p>Return <var>url</var>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=api-for-a-and-area-elements:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialized</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-origin data-dfn-type=attribute><code>origin</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-2>Reinitialize url</a>.<li><p>If <a id=api-for-a-and-area-elements:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-6>url</a> is null, return the
   empty string.<li><p>Return the <a href=browsers.html#ascii-serialisation-of-an-origin id=api-for-a-and-area-elements:ascii-serialisation-of-an-origin>serialization</a> of
   <a id=api-for-a-and-area-elements:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-7>url</a>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=api-for-a-and-area-elements:concept-url-origin data-x-internal=concept-url-origin>origin</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-protocol data-dfn-type=attribute><code>protocol</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-3>Reinitialize url</a>.<li><p>If <a id=api-for-a-and-area-elements:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-8>url</a> is null, return
   "<code>:</code>".<li><p>Return <a id=api-for-a-and-area-elements:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-9>url</a>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=api-for-a-and-area-elements:concept-url-scheme-2 data-x-internal=concept-url-scheme>scheme</a>, followed by "<code>:</code>".</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-protocol-2><a href=#dom-hyperlink-protocol>protocol</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-4>Reinitialize url</a>.<li><p>If <a id=api-for-a-and-area-elements:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-10>url</a> is null, then
   return.<li>
    <p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser data-x-internal=basic-url-parser>Basic URL parse</a> the given value, followed by "<code>:</code>", with <a id=api-for-a-and-area-elements:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-11>url</a> as
    <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:scheme-start-state href=https://url.spec.whatwg.org/#scheme-start-state data-x-internal=scheme-start-state>scheme start state</a> as
    <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override data-x-internal=basic-url-parser-state-override><i>state override</i></a>.</p>

    <p class=note>Because the URL parser ignores multiple consecutive colons, providing a value
    of "<code>https:</code>" (or even "<code>https::::</code>") is the same as
    providing a value of "<code>https</code>".</p>
   <li><p><a href=#update-href id=api-for-a-and-area-elements:update-href>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-username data-dfn-type=attribute><code>username</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-5>Reinitialize url</a>.<li><p>If <a id=api-for-a-and-area-elements:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-12>url</a> is null, return the
   empty string.<li><p>Return <a id=api-for-a-and-area-elements:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-13>url</a>'s <a href=https://url.spec.whatwg.org/#concept-url-username id=api-for-a-and-area-elements:concept-url-username data-x-internal=concept-url-username>username</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-username-2><a href=#dom-hyperlink-username>username</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-6>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-12 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-14>url</a>.<li><p>If <var>url</var> is null or <var>url</var>
   <a id=api-for-a-and-area-elements:cannot-have-a-username/password/port href=https://url.spec.whatwg.org/#cannot-have-a-username-password-port data-x-internal=cannot-have-a-username/password/port>cannot have a username/password/port</a>, then return.<li><p><a id=api-for-a-and-area-elements:set-the-username href=https://url.spec.whatwg.org/#set-the-username data-x-internal=set-the-username>Set the username</a>, given <var>url</var> and the given value.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-2>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-password data-dfn-type=attribute><code>password</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-7>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-13 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-15>url</a>.<li><p>If <var>url</var> is null, then return the empty string.<li><p>Return <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-password id=api-for-a-and-area-elements:concept-url-password data-x-internal=concept-url-password>password</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-password-2><a href=#dom-hyperlink-password>password</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-8>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-14 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-16>url</a>.<li><p>If <var>url</var> is null or <var>url</var>
   <a id=api-for-a-and-area-elements:cannot-have-a-username/password/port-2 href=https://url.spec.whatwg.org/#cannot-have-a-username-password-port data-x-internal=cannot-have-a-username/password/port>cannot have a username/password/port</a>, then return.<li><p><a id=api-for-a-and-area-elements:set-the-password href=https://url.spec.whatwg.org/#set-the-password data-x-internal=set-the-password>Set the password</a>, given <var>url</var> and the given value.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-3>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-host data-dfn-type=attribute><code>host</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-9>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-15 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-17>url</a>.<li><p>If <var>url</var> or <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-host id=api-for-a-and-area-elements:concept-url-host data-x-internal=concept-url-host>host</a> is null,
   return the empty string.<li><p>If <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-port id=api-for-a-and-area-elements:concept-url-port data-x-internal=concept-url-port>port</a> is null, return
   <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-host id=api-for-a-and-area-elements:concept-url-host-2 data-x-internal=concept-url-host>host</a>, <a href=https://url.spec.whatwg.org/#concept-host-serializer id=api-for-a-and-area-elements:host-serializer data-x-internal=host-serializer>serialized</a>.<li><p>Return <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-host id=api-for-a-and-area-elements:concept-url-host-3 data-x-internal=concept-url-host>host</a>, <a href=https://url.spec.whatwg.org/#concept-host-serializer id=api-for-a-and-area-elements:host-serializer-2 data-x-internal=host-serializer>serialized</a>, followed by "<code>:</code>" and <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-port id=api-for-a-and-area-elements:concept-url-port-2 data-x-internal=concept-url-port>port</a>, <a href=https://url.spec.whatwg.org/#serialize-an-integer id=api-for-a-and-area-elements:serialize-an-integer data-x-internal=serialize-an-integer>serialized</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-host-2><a href=#dom-hyperlink-host>host</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-10>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-16 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-18>url</a>.<li><p>If <var>url</var> is null or <var>url</var> has an <a id=api-for-a-and-area-elements:opaque-path-2 href=https://url.spec.whatwg.org/#url-opaque-path data-x-internal=opaque-path>opaque path</a>, then
   return.<li><p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-2 data-x-internal=basic-url-parser>Basic URL parse</a> the given value, with
   <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-2 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:host-state href=https://url.spec.whatwg.org/#host-state data-x-internal=host-state>host
   state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-2 data-x-internal=basic-url-parser-state-override><i>state
   override</i></a>.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-4>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-hostname data-dfn-type=attribute><code>hostname</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-11>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-17 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-19>url</a>.<li><p>If <var>url</var> or <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-host id=api-for-a-and-area-elements:concept-url-host-4 data-x-internal=concept-url-host>host</a> is null,
   return the empty string.<li><p>Return <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-host id=api-for-a-and-area-elements:concept-url-host-5 data-x-internal=concept-url-host>host</a>, <a href=https://url.spec.whatwg.org/#concept-host-serializer id=api-for-a-and-area-elements:host-serializer-3 data-x-internal=host-serializer>serialized</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-hostname-2><a href=#dom-hyperlink-hostname>hostname</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-12>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-18 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-20>url</a>.<li><p>If <var>url</var> is null or <var>url</var> has an <a id=api-for-a-and-area-elements:opaque-path-3 href=https://url.spec.whatwg.org/#url-opaque-path data-x-internal=opaque-path>opaque path</a>, then
   return.<li><p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-3 data-x-internal=basic-url-parser>Basic URL parse</a> the given value, with
   <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-3 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:hostname-state href=https://url.spec.whatwg.org/#hostname-state data-x-internal=hostname-state>hostname
   state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-3 data-x-internal=basic-url-parser-state-override><i>state
   override</i></a>.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-5>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-port data-dfn-type=attribute><code>port</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-13>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-19 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-21>url</a>.<li><p>If <var>url</var> or <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-port id=api-for-a-and-area-elements:concept-url-port-3 data-x-internal=concept-url-port>port</a> is null,
   return the empty string.<li><p>Return <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-port id=api-for-a-and-area-elements:concept-url-port-4 data-x-internal=concept-url-port>port</a>, <a href=https://url.spec.whatwg.org/#serialize-an-integer id=api-for-a-and-area-elements:serialize-an-integer-2 data-x-internal=serialize-an-integer>serialized</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-port-2><a href=#dom-hyperlink-port>port</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-14>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-20 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-22>url</a>.<li><p>If <var>url</var> is null or <var>url</var>
   <a id=api-for-a-and-area-elements:cannot-have-a-username/password/port-3 href=https://url.spec.whatwg.org/#cannot-have-a-username-password-port data-x-internal=cannot-have-a-username/password/port>cannot have a username/password/port</a>, then return.<li><p>If the given value is the empty string, then set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-port id=api-for-a-and-area-elements:concept-url-port-5 data-x-internal=concept-url-port>port</a> to null.<li><p>Otherwise, <a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-4 data-x-internal=basic-url-parser>basic URL parse</a> the given value, with
   <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-4 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:port-state href=https://url.spec.whatwg.org/#port-state data-x-internal=port-state>port
   state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-4 data-x-internal=basic-url-parser-state-override><i>state
   override</i></a>.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-6>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-pathname data-dfn-type=attribute><code>pathname</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-15>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-21 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-23>url</a>.<li><p>If <var>url</var> is null, then return the empty string.<li><p>Return the result of <a href=https://url.spec.whatwg.org/#url-path-serializer id=api-for-a-and-area-elements:url-path-serializer data-x-internal=url-path-serializer>URL path serializing</a>
   <var>url</var>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-pathname-2><a href=#dom-hyperlink-pathname>pathname</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-16>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-22 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-24>url</a>.<li><p>If <var>url</var> is null or <var>url</var> has an <a id=api-for-a-and-area-elements:opaque-path-4 href=https://url.spec.whatwg.org/#url-opaque-path data-x-internal=opaque-path>opaque path</a>, then
   return.<li><p>Set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-path id=api-for-a-and-area-elements:concept-url-path data-x-internal=concept-url-path>path</a> to the empty
   list.<li><p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-5 data-x-internal=basic-url-parser>Basic URL parse</a> the given value, with
   <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-5 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:path-start-state href=https://url.spec.whatwg.org/#path-start-state data-x-internal=path-start-state>path start
   state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-5 data-x-internal=basic-url-parser-state-override><i>state
   override</i></a>.<li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-7>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-search data-dfn-type=attribute><code>search</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-17>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-23 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-25>url</a>.<li><p>If <var>url</var> is null, or <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=api-for-a-and-area-elements:concept-url-query data-x-internal=concept-url-query>query</a> is either null or the empty string, return the empty
   string.<li><p>Return "<code>?</code>", followed by <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=api-for-a-and-area-elements:concept-url-query-2 data-x-internal=concept-url-query>query</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-search-2><a href=#dom-hyperlink-search>search</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-18>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-24 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-26>url</a>.<li><p>If <var>url</var> is null, terminate these steps.<li><p>If the given value is the empty string, set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=api-for-a-and-area-elements:concept-url-query-3 data-x-internal=concept-url-query>query</a> to null.

   <li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>input</var> be the given value with a single leading "<code>?</code>"
     removed, if any.<li><p>Set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=api-for-a-and-area-elements:concept-url-query-4 data-x-internal=concept-url-query>query</a> to the empty
     string.<li><p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-6 data-x-internal=basic-url-parser>Basic URL parse</a> <var>input</var>, with
     <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-6 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:query-state href=https://url.spec.whatwg.org/#query-state data-x-internal=query-state>query
     state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-6 data-x-internal=basic-url-parser-state-override><i>state
     override</i></a>.</ol>
   <li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-8>Update <code>href</code></a>.</ol>

  <p>The <dfn data-dfn-for=HTMLHyperlinkElementUtils id=dom-hyperlink-hash data-dfn-type=attribute><code>hash</code></dfn> getter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-19>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-25 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-27>url</a>.<li><p>If <var>url</var> is null, or <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-fragment id=api-for-a-and-area-elements:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> is either null or the empty string, return the
   empty string.<li><p>Return "<code>#</code>", followed by <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-fragment id=api-for-a-and-area-elements:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a>.</ol>

  <p>The <code id=api-for-a-and-area-elements:dom-hyperlink-hash-2><a href=#dom-hyperlink-hash>hash</a></code> setter steps are:</p>

  <ol><li><p><a href=#reinitialise-url id=api-for-a-and-area-elements:reinitialise-url-20>Reinitialize url</a>.<li><p>Let <var>url</var> be <a id=api-for-a-and-area-elements:this-26 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-hyperlink-url id=api-for-a-and-area-elements:concept-hyperlink-url-28>url</a>.<li><p>If <var>url</var> is null, then return.<li><p>If the given value is the empty string, set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-fragment id=api-for-a-and-area-elements:concept-url-fragment-3 data-x-internal=concept-url-fragment>fragment</a> to null.

   <li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>input</var> be the given value with a single leading "<code>#</code>"
     removed, if any.<li><p>Set <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-fragment id=api-for-a-and-area-elements:concept-url-fragment-4 data-x-internal=concept-url-fragment>fragment</a> to the empty
     string.<li><p><a href=https://url.spec.whatwg.org/#concept-basic-url-parser id=api-for-a-and-area-elements:basic-url-parser-7 data-x-internal=basic-url-parser>Basic URL parse</a> <var>input</var>, with
     <var>url</var> as <a href=https://url.spec.whatwg.org/#basic-url-parser-url id=api-for-a-and-area-elements:basic-url-parser-url-7 data-x-internal=basic-url-parser-url><i>url</i></a> and <a id=api-for-a-and-area-elements:fragment-state href=https://url.spec.whatwg.org/#fragment-state data-x-internal=fragment-state>fragment
     state</a> as <a href=https://url.spec.whatwg.org/#basic-url-parser-state-override id=api-for-a-and-area-elements:basic-url-parser-state-override-7 data-x-internal=basic-url-parser-state-override><i>state
     override</i></a>.</ol>
   <li><p><a href=#update-href id=api-for-a-and-area-elements:update-href-9>Update <code>href</code></a>.</ol>


  <h4 id=following-hyperlinks><span class=secno>4.6.4</span> Following hyperlinks<a href=#following-hyperlinks class=self-link></a></h4>

  <p>An element <var>element</var> <dfn id=cannot-navigate>cannot navigate</dfn> if any of the following are true:</p>

  <ul><li><p><var>element</var>'s <a id=following-hyperlinks:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id=following-hyperlinks:fully-active href=document-sequences.html#fully-active>fully active</a>;
   or<li><p><var>element</var> is not an <code id=following-hyperlinks:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element and is not
   <a id=following-hyperlinks:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>.</ul>

  <p class=note>This is also used by <a href=form-control-infrastructure.html#concept-form-submit id=following-hyperlinks:concept-form-submit>form submission</a> for
  the <code id=following-hyperlinks:the-form-element><a href=forms.html#the-form-element>form</a></code> element. The exception for <code id=following-hyperlinks:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> elements is for compatibility with
  web content.</p>

  <p>To <dfn id="get-an-element's-noopener">get an element's noopener</dfn>, given an <code id=following-hyperlinks:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=following-hyperlinks:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, or
  <code id=following-hyperlinks:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element <var>element</var>, a <a id=following-hyperlinks:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> <var>url</var>, and a
  string <var>target</var>, perform the following steps. They return a boolean.</p>

  <ol><li><p>If <var>element</var>'s <a href=#linkTypes>link types</a> include the <code id=following-hyperlinks:link-type-noopener><a href=#link-type-noopener>noopener</a></code> or <code id=following-hyperlinks:link-type-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code>
   keyword, then return true.<li id=opener-processing-model><p>If <var>element</var>'s <a href=#linkTypes>link types</a>
   do not include the <code id=following-hyperlinks:link-type-opener><a href=#link-type-opener>opener</a></code> keyword and <var>target</var> is an
   <a id=following-hyperlinks:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>_blank</code>", then return
   true.<li>
    <p>If <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-blob-entry id=following-hyperlinks:concept-url-blob-entry data-x-internal=concept-url-blob-entry>blob URL entry</a> is not
    null:</p>

    <ol><li><p>Let <var>blobOrigin</var> be <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-blob-entry id=following-hyperlinks:concept-url-blob-entry-2 data-x-internal=concept-url-blob-entry>blob URL entry</a>'s <a href=https://w3c.github.io/FileAPI/#blob-url-entry-environment id=following-hyperlinks:blob-url-entry-environment data-x-internal=blob-url-entry-environment>environment</a>'s <a href=webappapis.html#concept-settings-object-origin id=following-hyperlinks:concept-settings-object-origin>origin</a>.<li><p>Let <var>topLevelOrigin</var> be <var>element</var>'s <a id=following-hyperlinks:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings
     object</a>'s <a id=following-hyperlinks:concept-environment-top-level-origin href=webappapis.html#concept-environment-top-level-origin>top-level origin</a>.<li><p>If <var>blobOrigin</var> is not <a id=following-hyperlinks:same-site href=browsers.html#same-site>same site</a> with <var>topLevelOrigin</var>,
     then return true.</ol>
   <li><p>Return false.</ol>

  <p>To <dfn id=following-hyperlinks-2>follow the hyperlink</dfn> created by an element
  <var>subject</var>, given an optional <dfn id=following-hyperlinksuffix><var>hyperlinkSuffix</var></dfn> (default null) and an
  optional <dfn id=following-userinvolvement><var>userInvolvement</var></dfn> (default "<code id=following-hyperlinks:uni-none><a href=browsing-the-web.html#uni-none>none</a></code>"):</p>

  <ol><li><p>If <var>subject</var> <a href=#cannot-navigate id=following-hyperlinks:cannot-navigate>cannot navigate</a>, then return.<li><p>Let <var>targetAttributeValue</var> be the empty string.<li><p>If <var>subject</var> is an <code id=following-hyperlinks:the-a-element-4><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=following-hyperlinks:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element, then set
   <var>targetAttributeValue</var> to the result of <a href="semantics.html#get-an-element's-target" id="following-hyperlinks:get-an-element's-target">getting
   an element's target</a> given <var>subject</var>.<li><p>Let <var>urlRecord</var> be the result of <a id=following-hyperlinks:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
   <var>subject</var>'s <code id=following-hyperlinks:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute value, relative to
   <var>subject</var>'s <a id=following-hyperlinks:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>urlRecord</var> is failure, then return.<li><p>Let <var>noopener</var> be the result of <a href="#get-an-element's-noopener" id="following-hyperlinks:get-an-element's-noopener">getting
   an element's noopener</a> with <var>subject</var>, <var>urlRecord</var>, and
   <var>targetAttributeValue</var>.<li><p>Let <var>targetNavigable</var> be the first return value of applying <a id=following-hyperlinks:the-rules-for-choosing-a-navigable href=document-sequences.html#the-rules-for-choosing-a-navigable>the rules for
   choosing a navigable</a> given <var>targetAttributeValue</var>, <var>subject</var>'s
   <a id=following-hyperlinks:node-navigable href=document-sequences.html#node-navigable>node navigable</a>, and <var>noopener</var>.<li><p>If <var>targetNavigable</var> is null, then return.<li><p>Let <var>urlString</var> be the result of applying the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=following-hyperlinks:concept-url-serializer data-x-internal=concept-url-serializer>URL serializer</a> to <var>urlRecord</var>.<li><p>If <var>hyperlinkSuffix</var> is non-null, then append it to
   <var>urlString</var>.<li>
    <p><a id=following-hyperlinks:navigate href=browsing-the-web.html#navigate>Navigate</a> <var>targetNavigable</var> to
    <var>urlString</var> using <var>subject</var>'s <a id=following-hyperlinks:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, with <i id=following-hyperlinks:navigation-referrer-policy><a href=browsing-the-web.html#navigation-referrer-policy>referrerPolicy</a></i> set to <var>subject</var>'s
    <a href=#hyperlink-referrer-policy id=following-hyperlinks:hyperlink-referrer-policy>hyperlink referrer policy</a>, <i id=following-hyperlinks:navigation-user-involvement><a href=browsing-the-web.html#navigation-user-involvement>userInvolvement</a></i> set to <var>userInvolvement</var>, and
    <i id=following-hyperlinks:navigation-source-element><a href=browsing-the-web.html#navigation-source-element>sourceElement</a></i> set to <var>subject</var>.</p>

    <p class=note>Unlike many other types of navigations, following hyperlinks does not have
    special "<code id=following-hyperlinks:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>" behavior for when
    documents are not <a id=following-hyperlinks:completely-loaded href=document-lifecycle.html#completely-loaded>completely loaded</a>. This is true for both user-initiated instances
    of following hyperlinks, as well as script-triggered ones via, e.g., <code>aElement.click()</code>.</p>
   </ol>

  <p>The <dfn id=hyperlink-referrer-policy>hyperlink referrer policy</dfn> for an element <var>subject</var> is the value
  returned by the following steps:</p>

  <ol><li id=noreferrer-a-area-processing-model><p>If <var>subject</var>'s <a href=#linkTypes>link
   types</a> includes the <code id=following-hyperlinks:link-type-noreferrer-2><a href=#link-type-noreferrer>noreferrer</a></code> keyword, then return
   "<code>no-referrer</code>".<li><p>Return the current state of <var>subject</var>'s <code id=following-hyperlinks:attr-hyperlink-referrerpolicy><a href=#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> content attribute.</ol>

  




  <h4 id=downloading-resources><span class=secno>4.6.5</span> Downloading resources<a href=#downloading-resources class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download title="The HTMLAnchorElement.download property is a string indicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value, if any, specifies the default file name for use in labeling the resource in a local file system. If the name is not a valid file name in the underlying OS, the browser will adjust it.">HTMLAnchorElement/download</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>20+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>15+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>In some cases, resources are intended for later use rather than immediate viewing. To indicate
  that a resource is intended to be downloaded for use later, rather than immediately used, the
  <code id=downloading-resources:attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute can be specified on the
  <code id=downloading-resources:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=downloading-resources:the-area-element><a href=image-maps.html#the-area-element>area</a></code> element that creates the <a href=#hyperlink id=downloading-resources:hyperlink>hyperlink</a> to that
  resource.</p>

  <p>The attribute can furthermore be given a value, to specify the filename that user agents are
  to use when storing the resource in a file system. This value can be overridden by the `<code id=downloading-resources:http-content-disposition><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition</a></code>` HTTP header's filename parameters.
  <a href=references.html#refsRFC6266>[RFC6266]</a></p>

  <p>In cross-origin situations, the <code id=downloading-resources:attr-hyperlink-download-2><a href=#attr-hyperlink-download>download</a></code>
  attribute has to be combined with the `<code id=downloading-resources:http-content-disposition-2><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition</a></code>` HTTP header, specifically with the
  <code>attachment</code> disposition type, to avoid the user being warned of possibly
  nefarious activity. (This is to protect users from being made to download sensitive personal or
  confidential information without their full understanding.)</p>

  

  <hr>

  <p>To <dfn id=downloading-hyperlinks data-export="">download the hyperlink</dfn> created by an
  element <var>subject</var>, given an optional <dfn id=downloading-hyperlinksuffix><var>hyperlinkSuffix</var></dfn> (default null) and an
  optional <dfn id=downloading-userinvolvement><var>userInvolvement</var></dfn> (default
  "<code id=downloading-resources:uni-none><a href=browsing-the-web.html#uni-none>none</a></code>"):</p>

  <ol><li><p>If <var>subject</var> <a href=#cannot-navigate id=downloading-resources:cannot-navigate>cannot navigate</a>, then return.<li id=allowed-to-download><p>If <var>subject</var>'s <a id=downloading-resources:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=downloading-resources:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active
   sandboxing flag set</a> has the <a id=downloading-resources:sandboxed-downloads-browsing-context-flag href=browsers.html#sandboxed-downloads-browsing-context-flag>sandboxed downloads browsing context flag</a> set,
   then return.<li><p>Let <var>urlString</var> be the result of <a id=downloading-resources:encoding-parsing-and-serializing-a-url href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a
   URL</a> given <var>subject</var>'s <code id=downloading-resources:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute
   value, relative to <var>subject</var>'s <a id=downloading-resources:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>urlString</var> is failure, then return.<li><p>If <var>hyperlinkSuffix</var> is non-null, then append it to
   <var>urlString</var>.<li>
    <p>If <var>userInvolvement</var> is not "<code id=downloading-resources:uni-browser-ui><a href=browsing-the-web.html#uni-browser-ui>browser UI</a></code>",
    then:</p>

    <ol><li><p><a id=downloading-resources:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>subject</var> has a <code id=downloading-resources:attr-hyperlink-download-3><a href=#attr-hyperlink-download>download</a></code> attribute.<li><p>Let <var>navigation</var> be <var>subject</var>'s <a id=downloading-resources:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>'s
     <a href=nav-history-apis.html#window-navigation-api id=downloading-resources:window-navigation-api>navigation API</a>.<li><p>Let <var>filename</var> be the value of <var>subject</var>'s <code id=downloading-resources:attr-hyperlink-download-4><a href=#attr-hyperlink-download>download</a></code> attribute.<li><p>Let <var>continue</var> be the result of <a href=nav-history-apis.html#fire-a-download-request-navigate-event id=downloading-resources:fire-a-download-request-navigate-event>firing a download request <code>navigate</code> event</a> at
     <var>navigation</var> with <i id=downloading-resources:fire-navigate-download-destinationurl><a href=nav-history-apis.html#fire-navigate-download-destinationurl>destinationURL</a></i>
     set to <var>urlString</var>, <i id=downloading-resources:fire-navigate-download-userinvolvement><a href=nav-history-apis.html#fire-navigate-download-userinvolvement>userInvolvement</a></i> set to
     <var>userInvolvement</var>, <i id=downloading-resources:fire-navigate-download-sourceelement><a href=nav-history-apis.html#fire-navigate-download-sourceelement>sourceElement</a></i>
     set to <var>subject</var>, and <i id=downloading-resources:fire-navigate-download-filename><a href=nav-history-apis.html#fire-navigate-download-filename>filename</a></i> set to
     <var>filename</var>.<li><p>If <var>continue</var> is false, then return.</ol>
   <li>
    <p>Run these steps <a id=downloading-resources:in-parallel href=infrastructure.html#in-parallel>in parallel</a>:</p>

    <ol><li><p>Optionally, the user agent may abort these steps, if it believes doing so would
     safeguard the user from a potentially hostile download.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=downloading-resources:concept-request data-x-internal=concept-request>request</a> whose
     <a href=https://fetch.spec.whatwg.org/#concept-request-url id=downloading-resources:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>urlString</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=downloading-resources:concept-request-client data-x-internal=concept-request-client>client</a> is <a id=downloading-resources:entry-settings-object href=webappapis.html#entry-settings-object>entry settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-initiator id=downloading-resources:concept-request-initiator data-x-internal=concept-request-initiator>initiator</a> is "<code>download</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=downloading-resources:concept-request-destination data-x-internal=concept-request-destination>destination</a> is the empty string, and whose
     <a id=downloading-resources:synchronous-flag href=https://fetch.spec.whatwg.org/#synchronous-flag data-x-internal=synchronous-flag>synchronous flag</a> and <a id=downloading-resources:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> are set.<li><p><a href=#handle-as-a-download id=downloading-resources:handle-as-a-download>Handle as a download</a> the result of <a href=https://fetch.spec.whatwg.org/#concept-fetch id=downloading-resources:concept-fetch data-x-internal=concept-fetch>fetching</a> <var>request</var>.</ol>
   </ol>

  <p>To <dfn id=handle-as-a-download>handle as a download</dfn> a <a href=https://fetch.spec.whatwg.org/#concept-response id=downloading-resources:concept-response data-x-internal=concept-response>response</a>
  <var>response</var>:</p>

  <ol><li><p>Let <var>suggestedFilename</var> be the result of <a href=#getting-the-suggested-filename id=downloading-resources:getting-the-suggested-filename>getting the suggested
   filename</a> for <var>response</var>.<li><p>Provide the user with a way to save <var>response</var> for later use. If the user agent
   needs a filename, it should use <var>suggestedFilename</var>. Report any problems downloading the
   file to the user.<li><p>Return <var>suggestedFilename</var>.</ol>

  <p>To <dfn id=getting-the-suggested-filename>get the suggested filename</dfn> for a <a href=https://fetch.spec.whatwg.org/#concept-response id=downloading-resources:concept-response-2 data-x-internal=concept-response>response</a> <var>response</var>:</p>

  <p class=warning>This algorithm is intended to mitigate security dangers involved in downloading
  files from untrusted sites, and user agents are strongly urged to follow it.</p> 

  <ol><li><p>Let <var>filename</var> be the undefined value.<li><p>If <var>response</var> has a `<code id=downloading-resources:http-content-disposition-3><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition</a></code>` header, that header specifies the
   <code>attachment</code> disposition type, and the header includes filename information,
   then let <var>filename</var> have the value specified by the header, and jump to the step labeled
   <i>sanitize</i> below. <a href=references.html#refsRFC6266>[RFC6266]</a><li><p>Let <var>interface origin</var> be the <a href=https://dom.spec.whatwg.org/#concept-document-origin id=downloading-resources:concept-document-origin data-x-internal=concept-document-origin>origin</a> of the <code id=downloading-resources:document><a href=dom.html#document>Document</a></code> in which the <a href=#downloading-hyperlinks id=downloading-resources:downloading-hyperlinks>download</a> or <a id=downloading-resources:navigate href=browsing-the-web.html#navigate>navigate</a> action resulting in the
   download was initiated, if any.<li><p>Let <var>response origin</var> be the <a id=downloading-resources:concept-origin href=browsers.html#concept-origin>origin</a> of the URL of
   <var>response</var>, unless that URL's <a href=https://url.spec.whatwg.org/#concept-url-scheme id=downloading-resources:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> component
   is <code>data</code>, in which case let <var>response origin</var> be the same as the
   <var>interface origin</var>, if any.<li><p>If there is no <var>interface origin</var>, then let <var>trusted operation</var> be true.
   Otherwise, let <var>trusted operation</var> be true if <var>response origin</var> is the
   <a id=downloading-resources:same-origin href=browsers.html#same-origin>same origin</a> as <var>interface origin</var>, and false otherwise.<li><p>If <var>trusted operation</var> is true and <var>response</var> has a `<code id=downloading-resources:http-content-disposition-4><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition</a></code>` header and that header includes
   filename information, then let <var>filename</var> have the value specified by the header, and
   jump to the step labeled <i>sanitize</i> below. <a href=references.html#refsRFC6266>[RFC6266]</a><li><p>If the download was not initiated from a <a href=#hyperlink id=downloading-resources:hyperlink-2>hyperlink</a> created by an
   <code id=downloading-resources:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=downloading-resources:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element, or if the element of the <a href=#hyperlink id=downloading-resources:hyperlink-3>hyperlink</a> from
   which it was initiated did not have a <code id=downloading-resources:attr-hyperlink-download-5><a href=#attr-hyperlink-download>download</a></code>
   attribute when the download was initiated, or if there was such an attribute but its value when
   the download was initiated was the empty string, then jump to the step labeled <i>no proposed
   filename</i>.<li><p>Let <var>proposed filename</var> have the value of the <code id=downloading-resources:attr-hyperlink-download-6><a href=#attr-hyperlink-download>download</a></code> attribute of the element of the
   <a href=#hyperlink id=downloading-resources:hyperlink-4>hyperlink</a> that initiated the download at the time the download was
   initiated.<li><p>If <var>trusted operation</var> is true, let <var>filename</var> have
   the value of <var>proposed filename</var>, and jump to the step labeled <i>sanitize</i>
   below.<li><p>If <var>response</var> has a `<code id=downloading-resources:http-content-disposition-5><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition</a></code>` header and that header specifies
   the <code>attachment</code> disposition type, let <var>filename</var> have the value of
   <var>proposed filename</var>, and jump to the step labeled <i>sanitize</i> below.
   <a href=references.html#refsRFC6266>[RFC6266]</a><li><p><i>No proposed filename</i>: If <var>trusted operation</var> is true, or if the user
   indicated a preference for having the response in question downloaded, let <var>filename</var>
   have a value derived from the <a id=downloading-resources:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of <var>response</var> in an
   <a id=downloading-resources:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner, and jump to the step labeled <i>sanitize</i>
   below.<li>
    <p>Let <var>filename</var> be set to the user's preferred filename or to a filename selected by
    the user agent, and jump to the step labeled <i>sanitize</i> below.</p>

    <div class=warning>

     <p>If the algorithm reaches this step, then a download was begun from a different origin than
     <var>response</var>, and the origin did not mark the file as suitable for downloading, and the
     download was not initiated by the user. This could be because a <code id=downloading-resources:attr-hyperlink-download-7><a href=#attr-hyperlink-download>download</a></code> attribute was used to trigger the download, or
     because <var>response</var> is not of a type that the user agent supports.</p>

     <p>This could be dangerous, because, for instance, a hostile server could be trying to get a
     user to unknowingly download private information and then re-upload it to the hostile server,
     by tricking the user into thinking the data is from the hostile server.</p>

     <p>Thus, it is in the user's interests that the user be somehow notified that
     <var>response</var> comes from quite a different source, and to prevent confusion, any
     suggested filename from the potentially hostile <var>interface origin</var> should be
     ignored.</p>

    </div>
   <li><p><i>Sanitize</i>: Optionally, allow the user to influence <var>filename</var>. For
   example, a user agent could prompt the user for a filename, potentially providing the value of
   <var>filename</var> as determined above as a default value.<li>
    <p>Adjust <var>filename</var> to be suitable for the local file system.</p>

    <p class=example>For example, this could involve removing characters that are not legal in
    filenames, or trimming leading and trailing whitespace.</p>
   <li><p>If the platform conventions do not in any way use <a href=#concept-extension id=downloading-resources:concept-extension>extensions</a> to determine the types of file on the file system,
   then return <var>filename</var> as the filename.<li><p>Let <var>claimed type</var> be the type given by <var>response</var>'s <a href=urls-and-fetching.html#content-type id=downloading-resources:content-type>Content-Type metadata</a>, if any is known. Let <var>named type</var> be
   the type given by <var>filename</var>'s <a href=#concept-extension id=downloading-resources:concept-extension-2>extension</a>, if any
   is known. For the purposes of this step, a <i>type</i> is a mapping of a <a id=downloading-resources:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>
   to an <a href=#concept-extension id=downloading-resources:concept-extension-3>extension</a>.<li><p>If <var>named type</var> is consistent with the user's preferences (e.g., because the
   value of <var>filename</var> was determined by prompting the user), then return
   <var>filename</var> as the filename.<li><p>If <var>claimed type</var> and <var>named type</var> are the same type (i.e., the type
   given by <var>response</var>'s <a href=urls-and-fetching.html#content-type id=downloading-resources:content-type-2>Content-Type metadata</a> is
   consistent with the type given by <var>filename</var>'s <a href=#concept-extension id=downloading-resources:concept-extension-4>extension</a>), then return <var>filename</var> as the
   filename.<li>
    <p>If the <var>claimed type</var> is known, then alter <var>filename</var> to
    add an <a href=#concept-extension id=downloading-resources:concept-extension-5>extension</a> corresponding to <var>claimed
    type</var>.</p>

    <p>Otherwise, if <var>named type</var> is known to be potentially dangerous (e.g. it
    will be treated by the platform conventions as a native executable, shell script, HTML
    application, or executable-macro-capable document), then optionally alter <var>filename</var> to add a known-safe <a href=#concept-extension id=downloading-resources:concept-extension-6>extension</a>
    (e.g. "<code>.txt</code>").</p>

    <p class=note>This last step would make it impossible to download executables, which might not
    be desirable. As always, implementers are forced to balance security and usability in this
    matter.</p>
   <li><p>Return <var>filename</var> as the filename.</ol>

  <p>For the purposes of this algorithm, a file <dfn id=concept-extension>extension</dfn>
  consists of any part of the filename that platform conventions dictate will be used for
  identifying the type of the file. For example, many operating systems use the part of the filename
  following the last dot ("<code>.</code>") in the filename to determine the type of the
  file, and from that the manner in which the file is to be opened or executed.</p>

  <p>User agents should ignore any directory or path information provided by the response itself,
  its <a id=downloading-resources:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>, and any <code id=downloading-resources:attr-hyperlink-download-8><a href=#attr-hyperlink-download>download</a></code> attribute, in
  deciding where to store the resulting file in the user's file system.</p>

  


  <h4 id=hyperlink-auditing><span class=secno>4.6.6</span> <dfn>Hyperlink auditing</dfn><a href=#hyperlink-auditing class=self-link></a></h4>

  

  <p>If a <a href=#hyperlink id=hyperlink-auditing:hyperlink>hyperlink</a> created by an <code id=hyperlink-auditing:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=hyperlink-auditing:the-area-element><a href=image-maps.html#the-area-element>area</a></code> element has a
  <code id=hyperlink-auditing:ping><a href=#ping>ping</a></code> attribute, and the user follows the hyperlink, and
  the value of the element's <code id=hyperlink-auditing:attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute can be <a href=urls-and-fetching.html#encoding-parsing-a-url id=hyperlink-auditing:encoding-parsing-a-url>parsed</a>, relative to the element's <a id=hyperlink-auditing:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
  document</a>, without failure, then the user agent must take the <code id=hyperlink-auditing:ping-2><a href=#ping>ping</a></code> attribute's value, <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=hyperlink-auditing:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>split that string on ASCII whitespace</a>, <a href=urls-and-fetching.html#encoding-parsing-a-url id=hyperlink-auditing:encoding-parsing-a-url-2>parse</a> each resulting token, relative to the element's <a id=hyperlink-auditing:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and
  then run these steps for each resulting <a id=hyperlink-auditing:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>ping URL</var>, ignoring when
  parsing returns failure:</p>

  <ol><li><p>If <var>ping URL</var>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=hyperlink-auditing:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is not an
   <a id=hyperlink-auditing:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>, then return.<li><p>Optionally, return. (For example, the user agent might wish to ignore any or
   all ping URLs in accordance with the user's expressed preferences.)<li><p>Let <var>settingsObject</var> be the element's <a id=hyperlink-auditing:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a id=hyperlink-auditing:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=hyperlink-auditing:concept-request data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=hyperlink-auditing:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>ping URL</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-method id=hyperlink-auditing:concept-request-method data-x-internal=concept-request-method>method</a> is `<code>POST</code>`, <a href=https://fetch.spec.whatwg.org/#concept-request-header-list id=hyperlink-auditing:concept-request-header-list data-x-internal=concept-request-header-list>header list</a> is « (`<code id=hyperlink-auditing:content-type><a href=urls-and-fetching.html#content-type>Content-Type</a></code>`,
   `<code id=hyperlink-auditing:text/ping><a href=iana.html#text/ping>text/ping</a></code>`) », <a href=https://fetch.spec.whatwg.org/#concept-request-body id=hyperlink-auditing:concept-request-body data-x-internal=concept-request-body>body</a> is `<code>PING</code>`, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=hyperlink-auditing:concept-request-client data-x-internal=concept-request-client>client</a> is
   <var>settingsObject</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=hyperlink-auditing:concept-request-destination data-x-internal=concept-request-destination>destination</a> is the
   empty string, <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=hyperlink-auditing:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>include</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=hyperlink-auditing:concept-request-referrer data-x-internal=concept-request-referrer>referrer</a> is "<code>no-referrer</code>", and whose <a id=hyperlink-auditing:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set, and whose
   <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=hyperlink-auditing:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>ping</code>".<li>
    <p>Let <var>target URL</var> be the result of <a id=hyperlink-auditing:encoding-parsing-and-serializing-a-url href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a
    URL</a> given the element's <code id=hyperlink-auditing:attr-hyperlink-href-2><a href=#attr-hyperlink-href>href</a></code> attribute's value,
    relative to the element's <a id=hyperlink-auditing:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and then:</p>

    <dl class=switch><dt>If the <a href=https://dom.spec.whatwg.org/#concept-document-url id="hyperlink-auditing:the-document's-address" data-x-internal="the-document's-address">URL</a> of the <code id=hyperlink-auditing:document><a href=dom.html#document>Document</a></code> object
     containing the hyperlink being audited and <var>ping URL</var> have the <a id=hyperlink-auditing:same-origin href=browsers.html#same-origin>same
     origin</a><dt>If the origins are different, but the <a href=https://url.spec.whatwg.org/#concept-url-scheme id=hyperlink-auditing:concept-url-scheme-2 data-x-internal=concept-url-scheme>scheme</a> of
     the <a href=https://dom.spec.whatwg.org/#concept-document-url id="hyperlink-auditing:the-document's-address-2" data-x-internal="the-document's-address">URL</a> of the <code id=hyperlink-auditing:document-2><a href=dom.html#document>Document</a></code> containing the
     hyperlink being audited is not "<code>https</code>"<dd><var>request</var> must include a `<code id=hyperlink-auditing:ping-from><a href=#ping-from>Ping-From</a></code>` header with, as its value, the
     <a href=https://dom.spec.whatwg.org/#concept-document-url id="hyperlink-auditing:the-document's-address-3" data-x-internal="the-document's-address">URL</a> of the document containing the hyperlink, and a
     `<code id=hyperlink-auditing:ping-to><a href=#ping-to>Ping-To</a></code>` HTTP header with, as its value, the <var>target URL</var>.<dt>Otherwise<dd><var>request</var> must include a `<code id=hyperlink-auditing:ping-to-2><a href=#ping-to>Ping-To</a></code>` HTTP header with, as its value,
     <var>target URL</var>. <span class=note><var>request</var> does not include a
     `<code id=hyperlink-auditing:ping-from-2><a href=#ping-from>Ping-From</a></code>` header.</span></dl>
   <li><p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=hyperlink-auditing:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>.</ol>

  <p>This may be done <a id=hyperlink-auditing:in-parallel href=infrastructure.html#in-parallel>in parallel</a> with the primary fetch, and is independent of the
  result of that fetch.</p>

  <p>User agents should allow the user to adjust this behavior, for example in conjunction with a
  setting that disables the sending of HTTP `<code id=hyperlink-auditing:http-referer><a data-x-internal=http-referer href=https://httpwg.org/specs/rfc7231.html#header.referer>Referer</a></code>` (sic)
  headers. Based on the user's preferences, UAs may either <a id=hyperlink-auditing:ignore href=infrastructure.html#ignore>ignore</a> the <code id=hyperlink-auditing:ping-3><a href=#ping>ping</a></code> attribute altogether, or selectively ignore URLs in the
  list (e.g. ignoring any third-party URLs); this is explicitly accounted for in the steps
  above.</p>

  <p>User agents must ignore any entity bodies returned in the responses. User agents may close the
  connection prematurely once they start receiving a response body.</p>

  <p id=fingerprint-ping>
  <a id=hyperlink-auditing:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  An <code id=hyperlink-auditing:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=hyperlink-auditing:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element that creates a <a href=#hyperlink id=hyperlink-auditing:hyperlink-2>hyperlink</a> and has
  the <code id=hyperlink-auditing:ping-4><a href=#ping>ping</a></code> attribute is present, user agents may indicate
  to the user that following the hyperlink will also cause secondary requests to be sent in the
  background, possibly including listing the actual target URLs.</p>

  <p class=example>For example, a visual user agent could include the hostnames of the target ping
  URLs along with the hyperlink's actual URL in a status bar or tooltip.</p>

  

  <div class=note>
   <p>The <code id=hyperlink-auditing:ping-5><a href=#ping>ping</a></code> attribute is redundant with pre-existing
   technologies like HTTP redirects and JavaScript in allowing web pages to track which off-site
   links are most popular or allowing advertisers to track click-through rates.</p>

   <p>However, the <code id=hyperlink-auditing:ping-6><a href=#ping>ping</a></code> attribute provides these advantages
   to the user over those alternatives:</p>

   <ul><li>It allows the user to see the final target URL unobscured.<li>It allows the UA to inform the user about the out-of-band notifications.<li>It allows the UA to optimize the use of available network bandwidth so that the target page
    loads faster.</ul>
  </div>

  

  <h5 id=the-ping-headers><span class=secno>4.6.6.1</span> The `<code id=the-ping-headers:ping-from><a href=#ping-from>Ping-From</a></code>` and `<code id=the-ping-headers:ping-to><a href=#ping-to>Ping-To</a></code>` headers<a href=#the-ping-headers class=self-link></a></h5>

  <p>The `<dfn id=ping-from data-dfn-type=http-header><code>Ping-From</code></dfn>` and `<dfn id=ping-to data-dfn-type=http-header><code>Ping-To</code></dfn>` HTTP request headers are included in <a href=#hyperlink-auditing id=the-ping-headers:hyperlink-auditing>hyperlink
  auditing</a> requests. Their value is a <a id=the-ping-headers:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-ping-headers:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.</p>


  <h4 id=linkTypes><span class=secno>4.6.7</span> Link types<a href=#linkTypes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types title="The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.">Link_types</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types title="The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.">Link_types</a></div></div>

  <p>The following table summarizes the link types that are defined by this specification, by their
  corresponding keywords. This table is non-normative; the actual definitions for the link types are
  given in the next few sections.</p>

  <p>In this section, the term <i>referenced document</i> refers to the resource identified by the
  element representing the link, and the term <i>current document</i> refers to the resource within
  which the element representing the link finds itself.</p>

  

  <p>To determine which link types apply to a <code id=linkTypes:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=linkTypes:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=linkTypes:the-area-element><a href=image-maps.html#the-area-element>area</a></code>,
  or <code id=linkTypes:the-form-element><a href=forms.html#the-form-element>form</a></code> element, the element's <code>rel</code> attribute must be <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=linkTypes:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>split on ASCII whitespace</a>. The resulting tokens
  are the keywords for the link types that apply to that element.</p>

  

  <p>Except where otherwise specified, a keyword must not be specified more than once per <code id=linkTypes:attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute.</p>

  <p>Some of the sections that follow the table below list synonyms for certain keywords. The
  indicated synonyms are to be handled as specified by user agents, but must
  not be used in documents (for example, the keyword "<code>copyright</code>").</p>

  <p>Keywords are always <a id=linkTypes:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>, and must be
  compared as such.</p>

  <p class=example>Thus, <code>rel="next"</code> is the same as <code>rel="NEXT"</code>.</p>

  <p>Keywords that are <dfn id=body-ok>body-ok</dfn> affect whether <code id=linkTypes:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements are
  <a id=linkTypes:allowed-in-the-body href=semantics.html#allowed-in-the-body>allowed in the body</a>. The <a href=#body-ok id=linkTypes:body-ok>body-ok</a> keywords are
  <code id=linkTypes:link-type-dns-prefetch><a href=#link-type-dns-prefetch>dns-prefetch</a></code>,
  <code id=linkTypes:link-type-modulepreload><a href=#link-type-modulepreload>modulepreload</a></code>,
  <code id=linkTypes:link-type-pingback><a href=#link-type-pingback>pingback</a></code>,
  <code id=linkTypes:link-type-preconnect><a href=#link-type-preconnect>preconnect</a></code>,
  <code id=linkTypes:link-type-prefetch><a href=#link-type-prefetch>prefetch</a></code>,
  <code id=linkTypes:link-type-preload><a href=#link-type-preload>preload</a></code>, and
  <code id=linkTypes:link-type-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>.</p>

  <p>New link types that are to be implemented by web browsers are to be added to this standard. The
  remainder can be <a href=#concept-rel-extensions id=linkTypes:concept-rel-extensions>registered as extensions</a>.</p>

  <table id=table-link-relations class=yesno><thead><tr><th rowspan=2>Link type<th colspan=3>Effect on...<th rowspan=2><a href=#body-ok id=linkTypes:body-ok-2>body-ok</a><th rowspan=2>Has `<code id=linkTypes:http-link><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` processing<th rowspan=2>Brief description<tr><th><code id=linkTypes:the-link-element-3><a href=semantics.html#the-link-element>link</a></code><th><code id=linkTypes:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=linkTypes:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code><th><code id=linkTypes:the-form-element-2><a href=forms.html#the-form-element>form</a></code><tbody><tr><td><code id=linkTypes:rel-alternate><a href=#rel-alternate>alternate</a></code><td colspan=2><a href=#hyperlink id=linkTypes:hyperlink>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives alternate representations of the current document.<tr><td><code id=linkTypes:link-type-canonical><a href=#link-type-canonical>canonical</a></code><td><a href=#hyperlink id=linkTypes:hyperlink-2>Hyperlink</a><td colspan=2><em>not allowed</em><td class=no> · <td class=no> · <td>Gives the preferred URL for the current document.<tr><td><code id=linkTypes:link-type-author><a href=#link-type-author>author</a></code><td colspan=2><a href=#hyperlink id=linkTypes:hyperlink-3>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives a link to the author of the current document or article.<tr><td><code id=linkTypes:link-type-bookmark><a href=#link-type-bookmark>bookmark</a></code><td><em>not allowed</em><td><a href=#hyperlink id=linkTypes:hyperlink-4>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives the permalink for the nearest ancestor section.<tr><td><code id=linkTypes:link-type-dns-prefetch-2><a href=#link-type-dns-prefetch>dns-prefetch</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=no> · <td>Specifies that the user agent should preemptively perform DNS resolution for the target resource's <a id=linkTypes:concept-origin href=browsers.html#concept-origin>origin</a>.<tr><td><code id=linkTypes:link-type-expect><a href=#link-type-expect>expect</a></code><td><a href=#internal-resource-link id=linkTypes:internal-resource-link>Internal Resource</a><td colspan=2><em>not allowed</em><td class=no> · <td class=no> · <td>Expect an element with the target ID to appear in the current document.<tr><td><code id=linkTypes:link-type-external><a href=#link-type-external>external</a></code><td><em>not allowed</em><td colspan=2><a href=#hyperlink-annotation id=linkTypes:hyperlink-annotation>Annotation</a><td class=no> · <td class=no> · <td>Indicates that the referenced document is not part of the same site as the current document.<tr><td><code id=linkTypes:link-type-help><a href=#link-type-help>help</a></code><td colspan=3><a href=#hyperlink id=linkTypes:hyperlink-5>Hyperlink</a><td class=no> · <td class=no> · <td>Provides a link to context-sensitive help.<tr><td><code id=linkTypes:rel-icon><a href=#rel-icon>icon</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-2>External Resource</a><td colspan=2><em>not allowed</em><td class=no> · <td class=no> · <td>Imports an icon to represent the current document.<tr><td><code id=linkTypes:link-type-manifest><a href=#link-type-manifest>manifest</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-3>External Resource</a><td colspan=2><em>not allowed</em><td class=no> · <td class=no> · <td>Imports or links to an <a id=linkTypes:application-manifest href=https://w3c.github.io/manifest/#dfn-manifest data-x-internal=application-manifest>application manifest</a>. <a href=references.html#refsMANIFEST>[MANIFEST]</a><tr><td><code id=linkTypes:link-type-modulepreload-2><a href=#link-type-modulepreload>modulepreload</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-4>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=no> · <td>Specifies that the user agent must preemptively <a href=webappapis.html#fetch-a-single-module-script id=linkTypes:fetch-a-single-module-script>fetch the module
     script</a> and store it in the document's <a href=dom.html#concept-document-module-map id=linkTypes:concept-document-module-map>module map</a> for later
     evaluation. Optionally, the module's dependencies can be fetched as well.<tr><td><code id=linkTypes:link-type-license><a href=#link-type-license>license</a></code><td colspan=3><a href=#hyperlink id=linkTypes:hyperlink-6>Hyperlink</a><td class=no> · <td class=no> · <td>Indicates that the main content of the current document is covered by the copyright license described by the referenced document.<tr><td><code id=linkTypes:link-type-next><a href=#link-type-next>next</a></code><td colspan=3><a href=#hyperlink id=linkTypes:hyperlink-7>Hyperlink</a><td class=no> · <td class=no> · <td>Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.<tr><td><code id=linkTypes:link-type-nofollow><a href=#link-type-nofollow>nofollow</a></code><td><em>not allowed</em><td colspan=2><a href=#hyperlink-annotation id=linkTypes:hyperlink-annotation-2>Annotation</a><td class=no> · <td class=no> · <td>Indicates that the current document's original author or publisher does not endorse the referenced document.<tr><td><code id=linkTypes:link-type-noopener><a href=#link-type-noopener>noopener</a></code><td><em>not allowed</em><td colspan=2><a href=#hyperlink-annotation id=linkTypes:hyperlink-annotation-3>Annotation</a><td class=no> · <td class=no> · <td>Creates a <a id=linkTypes:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a> with a non-<a id=linkTypes:auxiliary-browsing-context href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing
     context</a> if the hyperlink would otherwise create one that was auxiliary (i.e., has an
     appropriate <code id=linkTypes:attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute value).<tr><td><code id=linkTypes:link-type-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code><td><em>not allowed</em><td colspan=2><a href=#hyperlink-annotation id=linkTypes:hyperlink-annotation-4>Annotation</a><td class=no> · <td class=no> · <td>No `<code id=linkTypes:http-referer><a data-x-internal=http-referer href=https://httpwg.org/specs/rfc7231.html#header.referer>Referer</a></code>` (sic) header will be included.
     Additionally, has the same effect as <code id=linkTypes:link-type-noopener-2><a href=#link-type-noopener>noopener</a></code>.<tr><td><code id=linkTypes:link-type-opener><a href=#link-type-opener>opener</a></code><td><em>not allowed</em><td colspan=2><a href=#hyperlink-annotation id=linkTypes:hyperlink-annotation-5>Annotation</a><td class=no> · <td class=no> · <td>Creates an <a id=linkTypes:auxiliary-browsing-context-2 href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing context</a> if the hyperlink would otherwise create
     a <a id=linkTypes:top-level-traversable-2 href=document-sequences.html#top-level-traversable>top-level traversable</a> with a non-<a id=linkTypes:auxiliary-browsing-context-3 href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing context</a> (i.e.,
     has "<code>_blank</code>" as <code id=linkTypes:attr-hyperlink-target-2><a href=#attr-hyperlink-target>target</a></code>
     attribute value).<tr><td><code id=linkTypes:link-type-pingback-2><a href=#link-type-pingback>pingback</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-5>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=no> · <td>Gives the address of the pingback server that handles pingbacks to the current document.<tr><td><code id=linkTypes:link-type-preconnect-2><a href=#link-type-preconnect>preconnect</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-6>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=yes> Yes <td>Specifies that the user agent should preemptively connect to the target resource's <a id=linkTypes:concept-origin-2 href=browsers.html#concept-origin>origin</a>.<tr><td><code id=linkTypes:link-type-prefetch-2><a href=#link-type-prefetch>prefetch</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-7>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=no> · <td>Specifies that the user agent should preemptively <a href=https://fetch.spec.whatwg.org/#concept-fetch id=linkTypes:concept-fetch data-x-internal=concept-fetch>fetch</a> and cache the target resource as it is likely to be required for a followup <a href=browsing-the-web.html#navigate id=linkTypes:navigate>navigation</a>.<tr><td><code id=linkTypes:link-type-preload-2><a href=#link-type-preload>preload</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-8>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=yes> Yes <td>Specifies that the user agent must preemptively <a href=https://fetch.spec.whatwg.org/#concept-fetch id=linkTypes:concept-fetch-2 data-x-internal=concept-fetch>fetch</a> and cache the target resource for current <a href=browsing-the-web.html#navigate id=linkTypes:navigate-2>navigation</a> according to the <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=linkTypes:concept-potential-destination data-x-internal=concept-potential-destination>potential destination</a> given by the <code id=linkTypes:attr-link-as><a href=semantics.html#attr-link-as>as</a></code> attribute (and the <a href=https://fetch.spec.whatwg.org/#request-priority id=linkTypes:concept-request-priority data-x-internal=concept-request-priority>priority</a> associated with the <a href=https://fetch.spec.whatwg.org/#concept-potential-destination-translate id=linkTypes:concept-potential-destination-translate data-x-internal=concept-potential-destination-translate>corresponding</a> <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=linkTypes:concept-request-destination data-x-internal=concept-request-destination>destination</a>).<tr><td><code id=linkTypes:link-type-prev><a href=#link-type-prev>prev</a></code><td colspan=3><a href=#hyperlink id=linkTypes:hyperlink-8>Hyperlink</a><td class=no> · <td class=no> · <td>Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.<tr><td><code id=linkTypes:link-type-privacy-policy><a href=#link-type-privacy-policy>privacy-policy</a></code><td colspan=2><a href=#hyperlink id=linkTypes:hyperlink-9>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives a link to information about the data collection and usage practices that apply to the current document.<tr><td><code id=linkTypes:link-type-search><a href=#link-type-search>search</a></code><td colspan=3><a href=#hyperlink id=linkTypes:hyperlink-10>Hyperlink</a><td class=no> · <td class=no> · <td>Gives a link to a resource that can be used to search through the current document and its related pages.<tr><td><code id=linkTypes:link-type-stylesheet-2><a href=#link-type-stylesheet>stylesheet</a></code><td><a href=#external-resource-link id=linkTypes:external-resource-link-9>External Resource</a><td colspan=2><em>not allowed</em><td class=yes> Yes <td class=no> · <td>Imports a style sheet.<tr><td><code id=linkTypes:link-type-tag><a href=#link-type-tag>tag</a></code><td><em>not allowed</em><td><a href=#hyperlink id=linkTypes:hyperlink-11>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives a tag (identified by the given address) that applies to the current document.<tr><td><code id=linkTypes:link-type-terms-of-service><a href=#link-type-terms-of-service>terms-of-service</a></code><td colspan=2><a href=#hyperlink id=linkTypes:hyperlink-12>Hyperlink</a><td><em>not allowed</em><td class=no> · <td class=no> · <td>Gives a link to information about the agreements between the current document's provider and users who wish to use the current document.</table>


  <h5 id=rel-alternate><span class=secno>4.6.7.1</span> <span id=link-type-alternate></span>Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel data-dfn-type=attr-value><code>alternate</code></dfn>"<a href=#rel-alternate class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=rel-alternate:rel-alternate><a href=#rel-alternate>alternate</a></code> keyword may be used with <code id=rel-alternate:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=rel-alternate:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=rel-alternate:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements.</p>

  <p>The meaning of this keyword depends on the values of the other attributes.</p>

  <dl class=switch><dt>If the element is a <code id=rel-alternate:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element and the <code id=rel-alternate:attr-link-rel><a href=semantics.html#attr-link-rel>rel</a></code>
   attribute also contains the keyword <code id=rel-alternate:link-type-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code><dd>
    <p>The <code id=rel-alternate:rel-alternate-2><a href=#rel-alternate>alternate</a></code> keyword modifies the meaning of the <code id=rel-alternate:link-type-stylesheet-2><a href=#link-type-stylesheet>stylesheet</a></code> keyword in the way described for that keyword. The
    <code id=rel-alternate:rel-alternate-3><a href=#rel-alternate>alternate</a></code> keyword does not create a link of its own.</p>

    <div class=example>

     <p>Here, a set of <code id=rel-alternate:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> elements provide some style sheets:</p>

     <pre><code class='html'><c- c>&lt;!-- a persistent style sheet --&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;default.css&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- the preferred alternate style sheet --&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;green.css&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Green styles&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- some alternate style sheets --&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;contrast.css&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;High contrast&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;big.css&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Big fonts&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;wide.css&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Wide screen&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt>If the <code id=rel-alternate:rel-alternate-4><a href=#rel-alternate>alternate</a></code> keyword is used with the <code id=rel-alternate:attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attribute set to the value <code>application/rss+xml</code> or the value <code>application/atom+xml</code><dd>
    <p>The keyword creates a <a href=#hyperlink id=rel-alternate:hyperlink>hyperlink</a> referencing a syndication feed (though not
    necessarily syndicating exactly the same content as the current page).</p>

    

    <p>For the purposes of feed autodiscovery, user agents should consider all <code id=rel-alternate:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
    elements in the document with the <code id=rel-alternate:rel-alternate-5><a href=#rel-alternate>alternate</a></code> keyword used and
    with their <code id=rel-alternate:attr-hyperlink-type-2><a href=#attr-hyperlink-type>type</a></code> attribute set to the value <code>application/rss+xml</code> or the value <code>application/atom+xml</code>. If the user agent has the concept of a default
    syndication feed, the first such element (in <a id=rel-alternate:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>) should be used as the
    default.</p>

    

    <div class=example>
     <p>The following <code id=rel-alternate:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> elements give syndication feeds for a blog:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;posts.xml&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Cool Stuff Blog&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;posts.xml?category=robots&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Cool Stuff Blog: robots category&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;comments.xml&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Cool Stuff Blog: Comments&quot;</c-><c- p>&gt;</c-></code></pre>

     <p>Such <code id=rel-alternate:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> elements would be used by user agents engaged in feed autodiscovery,
     with the first being the default (where applicable).</p>

     <p>The following example offers various different syndication feeds to the user, using
     <code id=rel-alternate:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> elements:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You can access the planets database using Atom feeds:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;recently-visited-planets.xml&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-><c- p>&gt;</c->Recently Visited Planets<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;known-bad-planets.xml&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-><c- p>&gt;</c->Known Bad Planets<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;unexplored-planets.xml&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;application/atom+xml&quot;</c-><c- p>&gt;</c->Unexplored Planets<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

     <p>These links would not be used in feed autodiscovery.</p>
    </div>
   <dt>Otherwise<dd>
    <p>The keyword creates a <a href=#hyperlink id=rel-alternate:hyperlink-2>hyperlink</a> referencing an alternate representation of the
    current document.</p>

    <p>The nature of the referenced document is given by the <code id=rel-alternate:attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code id=rel-alternate:attr-hyperlink-type-3><a href=#attr-hyperlink-type>type</a></code> attributes.</p>

    <p>If the <code id=rel-alternate:rel-alternate-6><a href=#rel-alternate>alternate</a></code> keyword is used with the <code id=rel-alternate:attr-hyperlink-hreflang-2><a href=#attr-hyperlink-hreflang>hreflang</a></code> attribute, and that attribute's value differs
    from the <a id=rel-alternate:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>'s <a id=rel-alternate:language href=dom.html#language>language</a>, it indicates that the referenced
    document is a translation.</p>

    <p>If the <code id=rel-alternate:rel-alternate-7><a href=#rel-alternate>alternate</a></code> keyword is used with the <code id=rel-alternate:attr-hyperlink-type-4><a href=#attr-hyperlink-type>type</a></code> attribute, it indicates that the referenced document is
    a reformulation of the current document in the specified format.</p>

    <p>The <code id=rel-alternate:attr-hyperlink-hreflang-3><a href=#attr-hyperlink-hreflang>hreflang</a></code> and <code id=rel-alternate:attr-hyperlink-type-5><a href=#attr-hyperlink-type>type</a></code> attributes can be combined when specified with the <code id=rel-alternate:rel-alternate-8><a href=#rel-alternate>alternate</a></code> keyword.</p>

    <div class=example>

     <p>The following example shows how you can specify versions of the page that use alternative
     formats, are aimed at other languages, and that are intended for other media:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/en/html&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>en</c-> <c- e>type</c-><c- o>=</c-><c- s>text/html</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;English HTML&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/fr/html&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>fr</c-> <c- e>type</c-><c- o>=</c-><c- s>text/html</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;French HTML&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/en/html/print&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>en</c-> <c- e>type</c-><c- o>=</c-><c- s>text/html</c-> <c- e>media</c-><c- o>=</c-><c- s>print</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;English HTML (for printing)&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/fr/html/print&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>fr</c-> <c- e>type</c-><c- o>=</c-><c- s>text/html</c-> <c- e>media</c-><c- o>=</c-><c- s>print</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;French HTML (for printing)&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/en/pdf&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>en</c-> <c- e>type</c-><c- o>=</c-><c- s>application/pdf</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;English PDF&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>alternate</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/fr/pdf&quot;</c-> <c- e>hreflang</c-><c- o>=</c-><c- s>fr</c-> <c- e>type</c-><c- o>=</c-><c- s>application/pdf</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;French PDF&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>

    <p>This relationship is transitive — that is, if a document links to two other documents
    with the link type "<code id=rel-alternate:rel-alternate-9><a href=#rel-alternate>alternate</a></code>", then, in addition to implying
    that those documents are alternative representations of the first document, it is also implying
    that those two documents are alternative representations of each other.</p>
   </dl>


  <h5 id=link-type-author><span class=secno>4.6.7.2</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel data-dfn-type=attr-value><code>author</code></dfn>"<a href=#link-type-author class=self-link></a></h5>

  <p>The <code id=link-type-author:link-type-author><a href=#link-type-author>author</a></code> keyword may be used with <code id=link-type-author:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-author:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=link-type-author:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements. This keyword creates a <a href=#hyperlink id=link-type-author:hyperlink>hyperlink</a>.</p>

  <p>For <code id=link-type-author:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=link-type-author:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements, the <code id=link-type-author:link-type-author-2><a href=#link-type-author>author</a></code>
  keyword indicates that the referenced document provides further information about the author of
  the nearest <code id=link-type-author:the-article-element><a href=sections.html#the-article-element>article</a></code> element ancestor of the element defining the hyperlink, if there
  is one, or of the page as a whole, otherwise.</p>

  <p>For <code id=link-type-author:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements, the <code id=link-type-author:link-type-author-3><a href=#link-type-author>author</a></code> keyword indicates
  that the referenced document provides further information about the author for the page as a
  whole.</p>

  <p class=note>The "referenced document" can be, and often is, a <code id=link-type-author:mailto-protocol><a data-x-internal=mailto-protocol href=https://www.rfc-editor.org/rfc/rfc6068#section-2>mailto:</a></code> URL giving the email address of the author. <a href=references.html#refsMAILTO>[MAILTO]</a></p>

  

  <p><strong>Synonyms</strong>: For historical reasons, user agents must also treat
  <code id=link-type-author:the-link-element-3><a href=semantics.html#the-link-element>link</a></code>, <code id=link-type-author:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=link-type-author:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements that have a <code>rev</code> attribute with the value "<code>made</code>" as having the <code id=link-type-author:link-type-author-4><a href=#link-type-author>author</a></code> keyword specified as a link relationship.</p>

  


  <h5 id=link-type-bookmark><span class=secno>4.6.7.3</span> Link type "<dfn data-dfn-for=a/rel,area/rel data-dfn-type=attr-value><code>bookmark</code></dfn>"<a href=#link-type-bookmark class=self-link></a></h5>

  <p>The <code id=link-type-bookmark:link-type-bookmark><a href=#link-type-bookmark>bookmark</a></code> keyword may be used with <code id=link-type-bookmark:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and
  <code id=link-type-bookmark:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements. This keyword creates a <a href=#hyperlink id=link-type-bookmark:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-bookmark:link-type-bookmark-2><a href=#link-type-bookmark>bookmark</a></code> keyword gives a permalink for the nearest
  ancestor <code id=link-type-bookmark:the-article-element><a href=sections.html#the-article-element>article</a></code> element of the linking element in question, or of
  the section the linking element is most closely associated with, if
  there are no ancestor <code id=link-type-bookmark:the-article-element-2><a href=sections.html#the-article-element>article</a></code> elements.</p>

  <div class=example>

   <p>The following snippet has three permalinks. A user agent could determine which permalink
   applies to which part of the spec by looking at where the permalinks are given.</p>

   <pre><code class='html'> ...
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Example of permalinks<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;a&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->First example<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;a.html&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;bookmark&quot;</c-><c- p>&gt;</c->This permalink applies to
   only the content from the first H2 to the second H2<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->. The DIV isn&apos;t
   exactly that section, but it roughly corresponds to it.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Second example<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>article</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;b&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;b.html&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;bookmark&quot;</c-><c- p>&gt;</c->This permalink applies to
   the outer ARTICLE element<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> (which could be, e.g., a blog post).<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>article</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;c&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;c.html&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;bookmark&quot;</c-><c- p>&gt;</c->This permalink applies to
    the inner ARTICLE element<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> (which could be, e.g., a blog comment).<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
 ...</code></pre>

  </div>


  <h5 id=link-type-canonical><span class=secno>4.6.7.4</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>canonical</code></dfn>"<a href=#link-type-canonical class=self-link></a></h5>

  <p>The <code id=link-type-canonical:link-type-canonical><a href=#link-type-canonical>canonical</a></code> keyword may be used with <code id=link-type-canonical:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  element. This keyword creates a <a href=#hyperlink id=link-type-canonical:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-canonical:link-type-canonical-2><a href=#link-type-canonical>canonical</a></code> keyword indicates that URL given by the <code id=link-type-canonical:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute is the preferred URL for the current document. That
  helps search engines reduce duplicate content, as described in more detail in <cite>The Canonical
  Link Relation</cite>. <a href=references.html#refsRFC6596>[RFC6596]</a></p>


  <h5 id=link-type-dns-prefetch><span class=secno>4.6.7.5</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>dns-prefetch</code></dfn>"<a href=#link-type-dns-prefetch class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/dns-prefetch title="The dns-prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.">Link_types/dns-prefetch</a><div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome yes"><span>Chrome</span><span>46+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie unknown"><span>Internet Explorer</span><span>?</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>Yes</span></span><span class="webview_android yes"><span>WebView Android</span><span>46+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-dns-prefetch:link-type-dns-prefetch><a href=#link-type-dns-prefetch>dns-prefetch</a></code> keyword may be used with
  <code id=link-type-dns-prefetch:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements. This keyword creates an <a href=#external-resource-link id=link-type-dns-prefetch:external-resource-link>external
  resource link</a>. This keyword is <a href=#body-ok id=link-type-dns-prefetch:body-ok>body-ok</a>.</p>

  <p>The <code id=link-type-dns-prefetch:link-type-dns-prefetch-2><a href=#link-type-dns-prefetch>dns-prefetch</a></code> keyword indicates that preemptively
  performing DNS resolution for the <a id=link-type-dns-prefetch:concept-origin href=browsers.html#concept-origin>origin</a> of the specified resource is likely to be
  beneficial, as it is highly likely that the user will require resources located at that
  <a id=link-type-dns-prefetch:concept-origin-2 href=browsers.html#concept-origin>origin</a>, and the user experience would be improved by preempting the latency costs
  associated with DNS resolution.</p>

  <p>There is no default type for resources given by the <code id=link-type-dns-prefetch:link-type-dns-prefetch-3><a href=#link-type-dns-prefetch>dns-prefetch</a></code> keyword.</p>

  <p>The appropriate times to <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-dns-prefetch:fetch-and-process-the-linked-resource>fetch and
  process</a> this type of link are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-dns-prefetch:external-resource-link-2>external resource link</a> is created on a <code id=link-type-dns-prefetch:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-dns-prefetch:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-dns-prefetch:external-resource-link-3>external resource link</a>'s <code id=link-type-dns-prefetch:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-dns-prefetch:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-dns-prefetch:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-dns-prefetch:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-dns-prefetch:external-resource-link-4>external resource link</a> that is already <a id=link-type-dns-prefetch:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.</ul>

  <p>The <a id=link-type-dns-prefetch:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> steps for this type of linked resource,
  given a <code id=link-type-dns-prefetch:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>, are:

  <ol><li><p>Let <var>url</var> be the result of <a id=link-type-dns-prefetch:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
   <var>el</var>'s <code id=link-type-dns-prefetch:attr-link-href-2><a href=semantics.html#attr-link-href>href</a></code> attribute's value, relative to
   <var>el</var>'s <a id=link-type-dns-prefetch:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>url</var> is failure, then return.<li><p>Let <var>partitionKey</var> be the result of <a href=https://fetch.spec.whatwg.org/#determine-the-network-partition-key id=link-type-dns-prefetch:determine-the-network-partition-key data-x-internal=determine-the-network-partition-key>determining the network partition key</a> given <var>el</var>'s
   <a id=link-type-dns-prefetch:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=link-type-dns-prefetch:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>.<li>
    <p>The user agent should <a id=link-type-dns-prefetch:resolve-an-origin href=https://fetch.spec.whatwg.org/#resolve-an-origin data-x-internal=resolve-an-origin>resolve an origin</a> given <var>partitionKey</var> and
    <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=link-type-dns-prefetch:concept-url-origin data-x-internal=concept-url-origin>origin</a>.</p>

    <p class=note>As the results of this algorithm can be cached, future fetches could be
    faster.</p>
   </ol>


  <h5 id=link-type-expect><span class=secno>4.6.7.6</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>expect</code></dfn>"<a href=#link-type-expect class=self-link></a></h5>

  <p>The <code id=link-type-expect:link-type-expect><a href=#link-type-expect>expect</a></code> keyword may be used with <code id=link-type-expect:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#internal-resource-link id=link-type-expect:internal-resource-link>internal resource
  link</a>.</p>

  <p>An <a href=#internal-resource-link id=link-type-expect:internal-resource-link-2>internal resource link</a> created by the <code id=link-type-expect:link-type-expect-2><a href=#link-type-expect>expect</a></code>
  keyword can be used to <a href=dom.html#render-blocked id=link-type-expect:render-blocked>block rendering</a> until the element that
  it <a href=browsing-the-web.html#the-indicated-part-of-the-document id=link-type-expect:the-indicated-part-of-the-document>indicates</a> is connected to the document and fully
  parsed.</p>

  <p>There is no default type for resources given by the <code id=link-type-expect:link-type-expect-3><a href=#link-type-expect>expect</a></code>
  keyword.</p>

  <p>Whenever any of the following conditions occur for a <code id=link-type-expect:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
  <var>el</var>:</p>

  <ul><li><p>the <code id=link-type-expect:link-type-expect-4><a href=#link-type-expect>expect</a></code> <a href=#internal-resource-link id=link-type-expect:internal-resource-link-3>internal resource link</a> is created
   on <var>el</var> that is already <a id=link-type-expect:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>;<li><p>an <code id=link-type-expect:link-type-expect-5><a href=#link-type-expect>expect</a></code> <a href=#internal-resource-link id=link-type-expect:internal-resource-link-4>internal resource link</a> has been
   created on <var>el</var> and <var>el</var> becomes
   <a id=link-type-expect:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context connected</a>;<li><p>an <code id=link-type-expect:link-type-expect-6><a href=#link-type-expect>expect</a></code> <a href=#internal-resource-link id=link-type-expect:internal-resource-link-5>internal resource link</a> has been
   created on <var>el</var>, <var>el</var> is already <a id=link-type-expect:browsing-context-connected-3 href=infrastructure.html#browsing-context-connected>browsing-context connected</a>, and
   <var>el</var>'s <code id=link-type-expect:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute is set, changed, or removed;
   or<li><p>an <code id=link-type-expect:link-type-expect-7><a href=#link-type-expect>expect</a></code> <a href=#internal-resource-link id=link-type-expect:internal-resource-link-6>internal resource link</a> has been
   created on <var>el</var>, <var>el</var> is already <a id=link-type-expect:browsing-context-connected-4 href=infrastructure.html#browsing-context-connected>browsing-context connected</a>, and
   <var>el</var>'s <code id=link-type-expect:attr-link-media><a href=semantics.html#attr-link-media>media</a></code> attribute is set, changed, or
   removed,</ul>

  <p>then <a href=#process-internal-resource-link id=link-type-expect:process-internal-resource-link>process</a> <var>el</var>.</p>

  <p>To <dfn id=process-internal-resource-link>process internal resource link</dfn> given a <code id=link-type-expect:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>,
  run these steps:</p>

  <ol><li><p>Let <var>doc</var> be <var>el</var>'s <a id=link-type-expect:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>Let <var>url</var> be the result of <a id=link-type-expect:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
   <var>el</var>'s <code id=link-type-expect:attr-link-href-2><a href=semantics.html#attr-link-href>href</a></code> attribute's value, relative to
   <var>doc</var>.<li><p>If this fails, or if <var>url</var> does not <a href=https://url.spec.whatwg.org/#concept-url-equals id=link-type-expect:concept-url-equals data-x-internal=concept-url-equals>equal</a> <var>doc</var>'s
   <a href=https://dom.spec.whatwg.org/#concept-document-url id="link-type-expect:the-document's-address" data-x-internal="the-document's-address">URL</a> with <i id=link-type-expect:url-equals-exclude-fragments><a data-x-internal=url-equals-exclude-fragments href=https://url.spec.whatwg.org/#url-equals-exclude-fragments>exclude fragments</a></i> set to false, then <a id=link-type-expect:unblock-rendering href=dom.html#unblock-rendering>unblock rendering</a> on
   <var>el</var> and return.<li><p>Let <var>indicatedElement</var> be the result of <a href=browsing-the-web.html#select-the-indicated-part id=link-type-expect:select-the-indicated-part>selecting the indicated part</a> given <var>doc</var>
   and <var>url</var>.<li>
    <p>If all of the following are true:</p>

    <ul><li><p><var>doc</var>'s <a id=link-type-expect:current-document-readiness href=dom.html#current-document-readiness>current document readiness</a> is "<code>loading</code>";<li><p><var>el</var> creates an <a href=#internal-resource-link id=link-type-expect:internal-resource-link-7>internal resource link</a>;<li><p><var>el</var> is <a id=link-type-expect:browsing-context-connected-5 href=infrastructure.html#browsing-context-connected>browsing-context connected</a>;<li><p><var>el</var>'s <code id=link-type-expect:attr-link-rel><a href=semantics.html#attr-link-rel>rel</a></code> attribute
     contains <code id=link-type-expect:link-type-expect-8><a href=#link-type-expect>expect</a></code>;<li><p><var>el</var> is <a id=link-type-expect:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>;<li><p><var>el</var>'s <code id=link-type-expect:attr-link-media-2><a href=semantics.html#attr-link-media>media</a></code> attribute
     <a id=link-type-expect:matches-the-environment href=common-microsyntaxes.html#matches-the-environment>matches the environment</a>; and<li><p><var>indicatedElement</var> is not an element, or is on a
     <a id=link-type-expect:stack-of-open-elements href=parsing.html#stack-of-open-elements>stack of open elements</a> of an <a id=link-type-expect:html-parser href=parsing.html#html-parser>HTML parser</a> whose associated
     <code id=link-type-expect:document><a href=dom.html#document>Document</a></code> is <var>doc</var>,</ul>

     <p>then <a id=link-type-expect:block-rendering href=dom.html#block-rendering>block rendering</a> on <var>el</var>.</p>
   <li><p>Otherwise, <a id=link-type-expect:unblock-rendering-2 href=dom.html#unblock-rendering>unblock rendering</a> on <var>el</var>.</ol>

  <p>To <dfn id=process-internal-resource-links>process internal resource links</dfn> given a <code id=link-type-expect:document-2><a href=dom.html#document>Document</a></code> <var>doc</var>:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#list-iterate id=link-type-expect:list-iterate data-x-internal=list-iterate>For each</a> <code id=link-type-expect:link-type-expect-9><a href=#link-type-expect>expect</a></code> <code id=link-type-expect:the-link-element-4><a href=semantics.html#the-link-element>link</a></code> element <var>link</var> in
   <var>doc</var>'s <a id=link-type-expect:render-blocking-element-set href=dom.html#render-blocking-element-set>render-blocking element set</a>, <a href=#process-internal-resource-link id=link-type-expect:process-internal-resource-link-2>process</a> <var>link</var>.</ol>

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=link-type-expect:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
  <var>value</var>, and <var>namespace</var>, are used to ensure <code id=link-type-expect:link-type-expect-10><a href=#link-type-expect>expect</a></code> <code id=link-type-expect:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> elements respond to dynamic <code id=link-type-expect:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> and <code id=link-type-expect:attr-a-name><a href=obsolete.html#attr-a-name>name</a></code> changes:</p>

  <ol><li><p>If <var>namespace</var> is not null, then return.<li><p>If <var>element</var> is in a <a id=link-type-expect:stack-of-open-elements-2 href=parsing.html#stack-of-open-elements>stack of open elements</a> of an
   <a id=link-type-expect:html-parser-2 href=parsing.html#html-parser>HTML parser</a>, then return.<li>
    <p>If any of the following is true:</p>

    <ul><li><p><var>localName</var> is <code id=link-type-expect:the-id-attribute-2><a href=dom.html#the-id-attribute>id</a></code>; or<li><p><var>localName</var> is <code id=link-type-expect:attr-a-name-2><a href=obsolete.html#attr-a-name>name</a></code> and <var>element</var> is an <code id=link-type-expect:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element,</ul>

    <p>then <a href=#process-internal-resource-links id=link-type-expect:process-internal-resource-links>process internal resource links</a> given <var>element</var>'s
    <a id=link-type-expect:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.</p>
   </ol>

  <h5 id=link-type-external><span class=secno>4.6.7.7</span> Link type "<dfn data-dfn-for=a/rel,area/rel,form/rel data-dfn-type=attr-value><code>external</code></dfn>"<a href=#link-type-external class=self-link></a></h5>
  

  <p>The <code id=link-type-external:link-type-external><a href=#link-type-external>external</a></code> keyword may be used with <code id=link-type-external:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
  <code id=link-type-external:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-external:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword does not create a
  <a href=#hyperlink id=link-type-external:hyperlink>hyperlink</a>, but <a href=#hyperlink-annotation id=link-type-external:hyperlink-annotation>annotates</a> any other
  hyperlinks created by the element (the implied hyperlink, if no other keywords create one).</p>

  <p>The <code id=link-type-external:link-type-external-2><a href=#link-type-external>external</a></code> keyword indicates that the link is leading to a
  document that is not part of the site that the current document forms a part of.</p>


  <h5 id=link-type-help><span class=secno>4.6.7.8</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel,form/rel data-dfn-type=attr-value><code>help</code></dfn>"<a href=#link-type-help class=self-link></a></h5>

  <p>The <code id=link-type-help:link-type-help><a href=#link-type-help>help</a></code> keyword may be used with <code id=link-type-help:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-help:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-help:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-help:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-help:hyperlink>hyperlink</a>.</p>

  <p>For <code id=link-type-help:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-help:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-help:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements, the <code id=link-type-help:link-type-help-2><a href=#link-type-help>help</a></code> keyword indicates that the referenced document provides further help
  information for the parent of the element defining the hyperlink, and its children.</p>

  <div class=example>

   <p>In the following example, the form control has associated context-sensitive help. The user
   agent could use this information, for example, displaying the referenced document if the user
   presses the "Help" or "F1" key.</p>

   <pre><code class='html'> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Topic: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>topic</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;help/topic.html&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;help&quot;</c-><c- p>&gt;</c->(Help)<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>For <code id=link-type-help:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements, the <code id=link-type-help:link-type-help-3><a href=#link-type-help>help</a></code> keyword indicates that
  the referenced document provides help for the page as a whole.</p>

  <p>For <code id=link-type-help:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=link-type-help:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements, on some browsers, the <code id=link-type-help:link-type-help-4><a href=#link-type-help>help</a></code> keyword causes the link to use a different cursor.</p>


  <h5 id=rel-icon><span class=secno>4.6.7.9</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>icon</code></dfn>"<a href=#rel-icon class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types#icon title="The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.">Link_types#icon</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios no"><span>Safari iOS</span><span>No</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>38+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>4.0+</span></span><span class="opera_android no"><span>Opera Android</span><span>No</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=link-icon-png" title=Favicons>caniuse.com table</a></span></span></div></div></div>

  <p>The <code id=rel-icon:rel-icon><a href=#rel-icon>icon</a></code> keyword may be used with <code id=rel-icon:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements.
  This keyword creates an <a href=#external-resource-link id=rel-icon:external-resource-link>external resource link</a>.</p>

  

  <p>The specified resource is an icon representing the page or site, and should be used by the user
  agent when representing the page in the user interface.</p>

  

  <p>Icons could be auditory icons, visual icons, or other kinds of icons. If
  multiple icons are provided, the user agent must select the most appropriate icon according to the
  <code id=rel-icon:attr-link-type><a href=semantics.html#attr-link-type>type</a></code>, <code id=rel-icon:attr-link-media><a href=semantics.html#attr-link-media>media</a></code>, and <code id=rel-icon:attr-link-sizes><a href=semantics.html#attr-link-sizes>sizes</a></code> attributes. If there are multiple equally appropriate icons,
  user agents must use the last one declared in <a id=rel-icon:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> at the time that the user
  agent collected the list of icons. If the user agent tries to use an icon but that icon is
  determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an
  unsupported format), then the user agent must try the next-most-appropriate icon as determined by
  the attributes.</p>

  

  <p class=note>User agents are not required to update icons when the list of icons changes, but
  are encouraged to do so.</p>

  <p>There is no default type for resources given by the <code id=rel-icon:rel-icon-2><a href=#rel-icon>icon</a></code> keyword.
  However, for the purposes of <a href=semantics.html#concept-link-type-sniffing>determining the type of the
  resource</a>, user agents must expect the resource to be an image.</p>

  

  <p>The <code id=rel-icon:attr-link-sizes-2><a href=semantics.html#attr-link-sizes>sizes</a></code> keywords represent icon sizes in raw pixels (as
  opposed to <a href=https://drafts.csswg.org/css-values/#px id="rel-icon:'px'" data-x-internal="'px'">CSS pixels</a>).</p>

  <p class=note>An icon that is 50 <a href=https://drafts.csswg.org/css-values/#px id="rel-icon:'px'-2" data-x-internal="'px'">CSS pixels</a> wide intended for
  displays with a device pixel density of two device pixels per <a href=https://drafts.csswg.org/css-values/#px id="rel-icon:'px'-3" data-x-internal="'px'">CSS pixel</a>
  (2x, 192dpi) would have a width of 100 raw pixels. This feature does not support indicating that a
  different resource is to be used for small high-resolution icons vs large low-resolution icons
  (e.g. 50×50 2x vs 100×100 1x).</p>

  

  <p>To parse and process the attribute's value, the user agent must first <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=rel-icon:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>split the attribute's value on ASCII whitespace</a>, and must then
  parse each resulting keyword to determine what it represents.</p>

  

  <p>The <dfn id=attr-link-sizes-any><code>any</code></dfn> keyword represents that the
  resource contains a scalable icon, e.g. as provided by an SVG image.</p>

  

  <p>Other keywords must be further parsed as follows to determine what they represent:</p>

  <ol><li><p>If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN
   CAPITAL LETTER X character, then this keyword doesn't represent anything. Return for
   that keyword.<li><p>Let <var>width string</var> be the string before the "<code>x</code>" or
   "<code>X</code>".<li><p>Let <var>height string</var> be the string after the "<code>x</code>" or
   "<code>X</code>".<li><p>If either <var>width string</var> or <var>height string</var> start with
   a U+0030 DIGIT ZERO (0) character or contain any characters other than <a id=rel-icon:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>,
   then this keyword doesn't represent anything. Return for that keyword.<li><p>Apply the <a id=rel-icon:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to <var>width
   string</var> to obtain <var>width</var>.<li><p>Apply the <a id=rel-icon:rules-for-parsing-non-negative-integers-2 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to <var>height
   string</var> to obtain <var>height</var>.<li><p>The keyword represents that the resource contains a bitmap icon with a width of <var>width</var> device pixels and a height of <var>height</var> device
   pixels.</ol>

  

  <p>The keywords specified on the <code id=rel-icon:attr-link-sizes-3><a href=semantics.html#attr-link-sizes>sizes</a></code> attribute must not
  represent icon sizes that are not actually available in the linked resource.</p>

  

  <p>The <a id=rel-icon:linked-resource-fetch-setup-steps href=semantics.html#linked-resource-fetch-setup-steps>linked resource fetch setup steps</a> for this type of linked resource, given a
  <code id=rel-icon:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element <var>el</var> and <a href=https://fetch.spec.whatwg.org/#concept-request id=rel-icon:concept-request data-x-internal=concept-request>request</a>
  <var>request</var>, are:</p>

  <ol><li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=rel-icon:concept-request-destination data-x-internal=concept-request-destination>destination</a> to
   "<code>image</code>".<li><p>Return true.</ol>

  <p>The <a id=rel-icon:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> steps for this type of linked resource are to do
  nothing.</p>

  <p>In the absence of a <code id=rel-icon:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> with the <code id=rel-icon:rel-icon-3><a href=#rel-icon>icon</a></code> keyword, for
  <code id=rel-icon:document><a href=dom.html#document>Document</a></code> objects whose <a href=https://dom.spec.whatwg.org/#concept-document-url id="rel-icon:the-document's-address" data-x-internal="the-document's-address">URL</a>'s
  <a href=https://url.spec.whatwg.org/#concept-url-scheme id=rel-icon:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is an <a id=rel-icon:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>, user agents may
  instead run these steps <a id=rel-icon:in-parallel href=infrastructure.html#in-parallel>in parallel</a>:</p>

  <ol><li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=rel-icon:concept-request-2 data-x-internal=concept-request>request</a> whose
   <a href=https://fetch.spec.whatwg.org/#concept-request-url id=rel-icon:concept-request-url data-x-internal=concept-request-url>URL</a> is the <a id=rel-icon:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> obtained by
   resolving the <a id=rel-icon:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> "<code>/favicon.ico</code>" against the
   <code id=rel-icon:document-2><a href=dom.html#document>Document</a></code> object's <a href=https://dom.spec.whatwg.org/#concept-document-url id="rel-icon:the-document's-address-2" data-x-internal="the-document's-address">URL</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=rel-icon:concept-request-client data-x-internal=concept-request-client>client</a> is the <code id=rel-icon:document-3><a href=dom.html#document>Document</a></code> object's
   <a id=rel-icon:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=rel-icon:concept-request-destination-2 data-x-internal=concept-request-destination>destination</a> is "<code>image</code>",
   <a id=rel-icon:synchronous-flag href=https://fetch.spec.whatwg.org/#synchronous-flag data-x-internal=synchronous-flag>synchronous flag</a> is set, <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=rel-icon:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials
   mode</a> is "<code>include</code>", and whose <a id=rel-icon:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a>
   is set.<li><p>Let <var>response</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-fetch id=rel-icon:concept-fetch data-x-internal=concept-fetch>fetching</a> <var>request</var>.<li><p>Use <var>response</var>'s <a id=rel-icon:unsafe-response href=urls-and-fetching.html#unsafe-response>unsafe response</a> as an icon as if it had been
   declared using the <code id=rel-icon:rel-icon-4><a href=#rel-icon>icon</a></code> keyword.</ol>

  

  <div class=example>

   <p>The following snippet shows the top part of an application with several icons.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->lsForums — Inbox<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>icon</c-> <c- e>href</c-><c- o>=</c-><c- s>favicon.png</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;16x16&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;image/png&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>icon</c-> <c- e>href</c-><c- o>=</c-><c- s>windows.ico</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;32x32 48x48&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;image/vnd.microsoft.icon&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>icon</c-> <c- e>href</c-><c- o>=</c-><c- s>mac.icns</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;128x128 512x512 8192x8192 32768x32768&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>icon</c-> <c- e>href</c-><c- o>=</c-><c- s>iphone.png</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;57x57&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;image/png&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>icon</c-> <c- e>href</c-><c- o>=</c-><c- s>gnome.svg</c-> <c- e>sizes</c-><c- o>=</c-><c- s>&quot;any&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;image/svg+xml&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>stylesheet</c-> <c- e>href</c-><c- o>=</c-><c- s>lsforums.css</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>lsforums.js</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>application-name</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;lsForums&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  ...</code></pre>

  </div>

  <p>For historical reasons, the <code id=rel-icon:rel-icon-5><a href=#rel-icon>icon</a></code> keyword may be preceded by the
  keyword "<code>shortcut</code>". If the "<code>shortcut</code>" keyword is
  present, the <code id=rel-icon:attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute's entire value must be an
  <a id=rel-icon:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>shortcut icon</code>" (with a single U+0020 SPACE character between the tokens and
  no other <a id=rel-icon:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>).</p>


  <h5 id=link-type-license><span class=secno>4.6.7.10</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel,form/rel data-dfn-type=attr-value><code>license</code></dfn>"<a href=#link-type-license class=self-link></a></h5>

  <p>The <code id=link-type-license:link-type-license><a href=#link-type-license>license</a></code> keyword may be used with <code id=link-type-license:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-license:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-license:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-license:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-license:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-license:link-type-license-2><a href=#link-type-license>license</a></code> keyword indicates that the referenced document
  provides the copyright license terms under which the main content of the current document is
  provided.</p>

  <p>This specification does not specify how to distinguish between the main content of a document
  and content that is not deemed to be part of that main content. The distinction should be made
  clear to the user.</p>

  <div class=example>

   <p>Consider a photo sharing site. A page on that site might describe and show a photograph, and
   the page might be marked up as follows:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Exampl Pictures: Kissat<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/style/default&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Kissat<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;../&quot;</c-><c- p>&gt;</c->Return to photo index<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/pix/39627052_fd8dcd98b5.jpg&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Kissat<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->One of them has six toes!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;license&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;http://www.opensource.org/licenses/mit-license.php&quot;</c-><c- p>&gt;</c->MIT Licensed<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> | <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;../&quot;</c-><c- p>&gt;</c->Photo index<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->© copyright 2009 Exampl Pictures. All Rights Reserved.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>In this case the <code id=link-type-license:link-type-license-3><a href=#link-type-license>license</a></code> applies to just the photo (the main
   content of the document), not the whole document. In particular not the design of the page
   itself, which is covered by the copyright given at the bottom of the document. This could be made
   clearer in the styling (e.g. making the license link prominently positioned near the photograph,
   while having the page copyright in light small text at the foot of the page).</p>

  </div>

  

  <p><strong>Synonyms</strong>: For historical reasons, user agents must also treat the keyword
  "<code>copyright</code>" like the <code id=link-type-license:link-type-license-4><a href=#link-type-license>license</a></code> keyword.</p>

  


  <h5 id=link-type-manifest><span class=secno>4.6.7.11</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>manifest</code></dfn>"<a href=#link-type-manifest class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/manifest title="The manifest keyword for the rel attribute of the <link> element indicates that the target resource is a Web app manifest.">Link_types/manifest</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox unknown"><span>Firefox</span><span>?</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie unknown"><span>Internet Explorer</span><span>?</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>39+</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-manifest:link-type-manifest><a href=#link-type-manifest>manifest</a></code> keyword may be used with <code id=link-type-manifest:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements.
  This keyword creates an <a href=#external-resource-link id=link-type-manifest:external-resource-link>external resource link</a>.</p>

  <p>The <code id=link-type-manifest:link-type-manifest-2><a href=#link-type-manifest>manifest</a></code> keyword indicates the manifest file that provides
  metadata associated with the current document.</p>

  

  <p>There is no default type for resources given by the <code id=link-type-manifest:link-type-manifest-3><a href=#link-type-manifest>manifest</a></code>
  keyword.</p>

  <p>When a web application is not <a href=https://w3c.github.io/manifest/#dfn-installed-web-application id=link-type-manifest:installed-web-application data-x-internal=installed-web-application>installed</a>, the
  appropriate time to <a id=link-type-manifest:fetch-and-process-the-linked-resource href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> for this link type is when
  the user agent deems it necessary. For example, when the user chooses to <a href=https://w3c.github.io/manifest/#dfn-installed-web-application id=link-type-manifest:installed-web-application-2 data-x-internal=installed-web-application>install the web application</a>.</p>

  <p>For an <a href=https://w3c.github.io/manifest/#dfn-installed-web-application id=link-type-manifest:installed-web-application-3 data-x-internal=installed-web-application>installed web application</a>, the
  appropriate times to <a id=link-type-manifest:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> for this link type
  are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-manifest:external-resource-link-2>external resource link</a> is created on a <code id=link-type-manifest:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-manifest:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-manifest:external-resource-link-3>external resource link</a>'s <code id=link-type-manifest:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-manifest:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-manifest:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-manifest:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-manifest:external-resource-link-4>external resource link</a> that is already <a id=link-type-manifest:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.</ul>

  <p>In any case, only the first <code id=link-type-manifest:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> element in <a id=link-type-manifest:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> whose <code id=link-type-manifest:attr-link-rel><a href=semantics.html#attr-link-rel>rel</a></code> attribute contains the token <code id=link-type-manifest:link-type-manifest-4><a href=#link-type-manifest>manifest</a></code> may be used.</p>

  <p>A user agent must not <a id=link-type-manifest:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> for this link type.</p>

  <p>The <a id=link-type-manifest:linked-resource-fetch-setup-steps href=semantics.html#linked-resource-fetch-setup-steps>linked resource fetch setup steps</a> for this type of linked resource, given a
  <code id=link-type-manifest:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> element <var>el</var> and <a href=https://fetch.spec.whatwg.org/#concept-request id=link-type-manifest:concept-request data-x-internal=concept-request>request</a>
  <var>request</var>, are:</p>

  <ol><li><p>Let <var>navigable</var> be <var>el</var>'s <a id=link-type-manifest:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=link-type-manifest:node-navigable href=document-sequences.html#node-navigable>node
   navigable</a>.<li><p>If <var>navigable</var> is null, then return false.<li><p>If <var>navigable</var> is not a <a id=link-type-manifest:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>, then return
   false.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-initiator id=link-type-manifest:concept-request-initiator data-x-internal=concept-request-initiator>initiator</a> to
   "<code>manifest</code>".<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=link-type-manifest:concept-request-destination data-x-internal=concept-request-destination>destination</a> to
   "<code>manifest</code>".<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=link-type-manifest:concept-request-mode data-x-internal=concept-request-mode>mode</a> to "<code>cors</code>".<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=link-type-manifest:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials
   mode</a> to the <a id=link-type-manifest:cors-settings-attribute-credentials-mode href=urls-and-fetching.html#cors-settings-attribute-credentials-mode>CORS settings attribute credentials mode</a> for <var>el</var>'s
   <code id=link-type-manifest:attr-link-crossorigin><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code> content attribute.<li><p>Return true.</ol>

  <p>To <a href=semantics.html#process-the-linked-resource id=link-type-manifest:process-the-linked-resource>process this type of linked resource</a> given
  a <code id=link-type-manifest:the-link-element-7><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>, boolean <var>success</var>, <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-manifest:concept-response data-x-internal=concept-response>response</a> <var>response</var>, and <a id=link-type-manifest:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a>
  <var>bodyBytes</var>:</p>

  <ol><li><p>If <var>response</var>'s <a href=urls-and-fetching.html#content-type id=link-type-manifest:content-type>Content-Type metadata</a> is not a
   <a id=link-type-manifest:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a>, then set <var>success</var> to false.<li>
    <p>If <var>success</var> is true:</p>

    <ol><li><p>Let <var>document URL</var> be <var>el</var>'s <a id=link-type-manifest:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="link-type-manifest:the-document's-address" data-x-internal="the-document's-address">URL</a>.<li><p>Let <var>manifest URL</var> be <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=link-type-manifest:concept-response-url data-x-internal=concept-response-url>URL</a>.<li><p><a id=link-type-manifest:process-the-manifest href=https://w3c.github.io/manifest/#dfn-processing-a-manifest data-x-internal=process-the-manifest>Process the manifest</a> given <var>document URL</var>, <var>manifest
     URL</var>, and <var>bodyBytes</var>. <a href=references.html#refsMANIFEST>[MANIFEST]</a></ol>
   </ol>

  <p>The <a id=link-type-manifest:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> steps for this type of linked resource are to do
  nothing.</p>

  


  <h5 id=link-type-modulepreload><span class=secno>4.6.7.12</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>modulepreload</code></dfn>"<a href=#link-type-modulepreload class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/modulepreload title="The modulepreload keyword, for the rel attribute of the <link> element, provides a declarative way to preemptively fetch a module script, parse and compile it, and store it in the document's module map for later execution.">Link_types/modulepreload</a><div class=support><span class="firefox yes"><span>Firefox</span><span>115+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome yes"><span>Chrome</span><span>66+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie unknown"><span>Internet Explorer</span><span>?</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-modulepreload:link-type-modulepreload><a href=#link-type-modulepreload>modulepreload</a></code> keyword may be used with
  <code id=link-type-modulepreload:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements. This keyword creates an <a href=#external-resource-link id=link-type-modulepreload:external-resource-link>external resource link</a>. This
  keyword is <a href=#body-ok id=link-type-modulepreload:body-ok>body-ok</a>.</p>

  <p>The <code id=link-type-modulepreload:link-type-modulepreload-2><a href=#link-type-modulepreload>modulepreload</a></code> keyword is a specialized alternative
  to the <code id=link-type-modulepreload:link-type-preload><a href=#link-type-preload>preload</a></code> keyword, with a processing model geared toward
  preloading <a href=webappapis.html#module-script id=link-type-modulepreload:module-script>module scripts</a>. In particular, it uses the specific
  fetch behavior for module scripts (including, e.g., a different interpretation of the <code id=link-type-modulepreload:attr-link-crossorigin><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code> attribute), and places the result into the
  appropriate <a href=dom.html#concept-document-module-map id=link-type-modulepreload:concept-document-module-map>module map</a> for later evaluation. In
  contrast, a similar <a href=#external-resource-link id=link-type-modulepreload:external-resource-link-2>external resource link</a> using the <code id=link-type-modulepreload:link-type-preload-2><a href=#link-type-preload>preload</a></code> keyword would place the result in the preload cache, without
  affecting the document's <a href=dom.html#concept-document-module-map id=link-type-modulepreload:concept-document-module-map-2>module map</a>.</p>

  <p>Additionally, implementations can take advantage of the fact that <a href=webappapis.html#module-script id=link-type-modulepreload:module-script-2>module scripts</a> declare their dependencies in order to fetch the specified module's
  dependency as well. This is intended as an optimization opportunity, since the user agent knows
  that, in all likelihood, those dependencies will also be needed later. It will not generally be
  observable without using technology such as service workers, or monitoring on the server side.
  Notably, the appropriate <code id=link-type-modulepreload:event-load><a href=indices.html#event-load>load</a></code> or <code id=link-type-modulepreload:event-error><a href=indices.html#event-error>error</a></code> events will occur after the specified module is fetched, and
  will not wait for any dependencies.</p>

  

  <p>A user agent must not <a id=link-type-modulepreload:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> for this link type.</p>

  <p>The appropriate times to <a id=link-type-modulepreload:fetch-and-process-the-linked-resource href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> for such a link
  are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-modulepreload:external-resource-link-3>external resource link</a> is created on a <code id=link-type-modulepreload:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-modulepreload:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-modulepreload:external-resource-link-4>external resource link</a>'s <code id=link-type-modulepreload:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-modulepreload:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-modulepreload:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-modulepreload:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-modulepreload:external-resource-link-5>external resource link</a> that is already <a id=link-type-modulepreload:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.</ul>

  

  <p class=note>Unlike some other link relations, changing the relevant attributes (such as <code id=link-type-modulepreload:attr-link-as><a href=semantics.html#attr-link-as>as</a></code>, <code id=link-type-modulepreload:attr-link-crossorigin-2><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code>, and
  <code id=link-type-modulepreload:attr-link-referrerpolicy><a href=semantics.html#attr-link-referrerpolicy>referrerpolicy</a></code>) of such a <code id=link-type-modulepreload:the-link-element-5><a href=semantics.html#the-link-element>link</a></code>
  does not trigger a new fetch. This is because the document's <a href=dom.html#concept-document-module-map id=link-type-modulepreload:concept-document-module-map-3>module map</a> has already been populated by a previous
  fetch, and so re-fetching would be pointless.</p>

  

  <p>The <a id=link-type-modulepreload:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> algorithm for <code id=link-type-modulepreload:link-type-modulepreload-3><a href=#link-type-modulepreload>modulepreload</a></code> links, given a <code id=link-type-modulepreload:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> element
  <var>el</var>, is as follows:</p>

  <ol><li><p>If <var>el</var>'s <code id=link-type-modulepreload:attr-link-href-2><a href=semantics.html#attr-link-href>href</a></code> attribute's value is the
   empty string, then return.<li><p>Let <var>destination</var> be the current state of <var>el</var>'s <code id=link-type-modulepreload:attr-link-as-2><a href=semantics.html#attr-link-as>as</a></code> attribute (a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=link-type-modulepreload:concept-request-destination data-x-internal=concept-request-destination>destination</a>), or "<code>script</code>" if
   it is in no state.<li><p>If <var>destination</var> is not <a href=https://fetch.spec.whatwg.org/#request-destination-script-like id=link-type-modulepreload:concept-script-like-destination data-x-internal=concept-script-like-destination>script-like</a>, then <a id=link-type-modulepreload:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element
   task</a> on the <a id=link-type-modulepreload:networking-task-source href=webappapis.html#networking-task-source>networking task source</a> given <var>el</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-modulepreload:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=link-type-modulepreload:event-error-2><a href=indices.html#event-error>error</a></code>
   at <var>el</var>, and return.<li><p>Let <var>url</var> be the result of <a id=link-type-modulepreload:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
   <var>el</var>'s <code id=link-type-modulepreload:attr-link-href-3><a href=semantics.html#attr-link-href>href</a></code> attribute's value, relative to
   <var>el</var>'s <a id=link-type-modulepreload:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>url</var> is failure, then return.<li><p>Let <var>settings object</var> be <var>el</var>'s <a id=link-type-modulepreload:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a id=link-type-modulepreload:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>.<li><p>Let <var>credentials mode</var> be the <a id=link-type-modulepreload:cors-settings-attribute-credentials-mode href=urls-and-fetching.html#cors-settings-attribute-credentials-mode>CORS settings attribute credentials
   mode</a> for <var>el</var>'s <code id=link-type-modulepreload:attr-link-crossorigin-3><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code>
   attribute.<li><p>Let <var>cryptographic nonce</var> be
   <var>el</var>.<a id=link-type-modulepreload:cryptographicnonce href=urls-and-fetching.html#cryptographicnonce>[[CryptographicNonce]]</a>.<li><p>Let <var>integrity metadata</var> be the value of <var>el</var>'s <code id=link-type-modulepreload:attr-link-integrity><a href=semantics.html#attr-link-integrity>integrity</a></code> attribute, if it is specified, or the empty string
   otherwise.<li><p>If <var>el</var> does not have an <code id=link-type-modulepreload:attr-link-integrity-2><a href=semantics.html#attr-link-integrity>integrity</a></code>
   attribute, then set <var>integrity metadata</var> to the result of <a id=link-type-modulepreload:resolving-a-module-integrity-metadata href=webappapis.html#resolving-a-module-integrity-metadata>resolving a module
   integrity metadata</a> with <var>url</var> and <var>settings object</var>.<li><p>Let <var>referrer policy</var> be the current state of <var>el</var>'s <code id=link-type-modulepreload:attr-link-referrerpolicy-2><a href=semantics.html#attr-link-referrerpolicy>referrerpolicy</a></code> attribute.<li><p>Let <var>fetch priority</var> be the current state of <var>el</var>'s <code id=link-type-modulepreload:attr-link-fetchpriority><a href=semantics.html#attr-link-fetchpriority>fetchpriority</a></code> attribute.<li><p>Let <var>options</var> be a <a id=link-type-modulepreload:script-fetch-options href=webappapis.html#script-fetch-options>script fetch options</a> whose <a href=webappapis.html#concept-script-fetch-options-nonce id=link-type-modulepreload:concept-script-fetch-options-nonce>cryptographic nonce</a> is <var>cryptographic
   nonce</var>, <a href=webappapis.html#concept-script-fetch-options-integrity id=link-type-modulepreload:concept-script-fetch-options-integrity>integrity metadata</a> is
   <var>integrity metadata</var>, <a href=webappapis.html#concept-script-fetch-options-parser id=link-type-modulepreload:concept-script-fetch-options-parser>parser
   metadata</a> is "<code>not-parser-inserted</code>", <a href=webappapis.html#concept-script-fetch-options-credentials id=link-type-modulepreload:concept-script-fetch-options-credentials>credentials mode</a> is <var>credentials
   mode</var>, <a href=webappapis.html#concept-script-fetch-options-referrer-policy id=link-type-modulepreload:concept-script-fetch-options-referrer-policy>referrer
   policy</a> is <var>referrer policy</var>, and <a href=webappapis.html#concept-script-fetch-options-fetch-priority id=link-type-modulepreload:concept-script-fetch-options-fetch-priority>fetch priority</a> is
   <var>fetch priority</var>.<li>
    <p><a id=link-type-modulepreload:fetch-a-modulepreload-module-script-graph href=webappapis.html#fetch-a-modulepreload-module-script-graph>Fetch a modulepreload module script graph</a> given <var>url</var>,
    <var>destination</var>, <var>settings object</var>, <var>options</var>, and with the following
    steps given <var>result</var>:</p>

    <ol><li><p>If <var>result</var> is null, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-modulepreload:concept-event-fire-2 data-x-internal=concept-event-fire>fire an
     event</a> named <code id=link-type-modulepreload:event-error-3><a href=indices.html#event-error>error</a></code> at <var>el</var>,
     and return.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-modulepreload:concept-event-fire-3 data-x-internal=concept-event-fire>Fire an event</a> named <code id=link-type-modulepreload:event-load-2><a href=indices.html#event-load>load</a></code> at <var>el</var>.</ol>
   </ol>

   <p>The <a id=link-type-modulepreload:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> steps for this type of linked resource are to do
   nothing.</p>

  

  <div id=example-modulepreload-manifest class=example><a href=#example-modulepreload-manifest class=self-link></a>
   <p>The following snippet shows the top part of an application with several modules preloaded:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->IRCFog<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;modulepreload&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;modulepreload&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;helpers.mjs&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;modulepreload&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;irc.mjs&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;modulepreload&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;fog-machine.mjs&quot;</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;</c->
<c- p>...</c-></code></pre>

   <p>Assume that the module graph for the application is as follows:</p>

   <img class=darkmode-aware src=../images/ircfog-modules.svg width=301 alt="The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs." height=151>

   <p>Here we see the application developer has used <code id=link-type-modulepreload:link-type-modulepreload-4><a href=#link-type-modulepreload>modulepreload</a></code> to declare all of the modules in their module graph,
   ensuring that the user agent initiates fetches for them all. Without such preloading, the user
   agent might need to go through multiple network roundtrips before discovering <code>helpers.mjs</code>, if technologies such as HTTP/2 Server Push are not in play. In
   this way, <code id=link-type-modulepreload:link-type-modulepreload-5><a href=#link-type-modulepreload>modulepreload</a></code> <code id=link-type-modulepreload:the-link-element-7><a href=semantics.html#the-link-element>link</a></code> elements can be
   used as a sort of "manifest" of the application's modules.</p>
  </div>

  <div id=example-modulepreload-dynamic-import class=example><a href=#example-modulepreload-dynamic-import class=self-link></a>
   <p>The following code shows how <code id=link-type-modulepreload:link-type-modulepreload-6><a href=#link-type-modulepreload>modulepreload</a></code> links can
   be used in conjunction with <code id=link-type-modulepreload:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> to ensure network fetching is done ahead of
   time, so that when <code id=link-type-modulepreload:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> is called, the module is already ready (but not
   evaluated) in the <a id=link-type-modulepreload:module-map href=webappapis.html#module-map>module map</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;modulepreload&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;awesome-viewer.mjs&quot;</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;import(&apos;./awesome-viewer.mjs&apos;).then(m =&gt; m.view())&quot;</c-><c- p>&gt;</c->
  View awesome thing
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>
  </div>

  <h5 id=link-type-nofollow><span class=secno>4.6.7.13</span> Link type "<dfn data-dfn-for=a/rel,area/rel,form/rel data-dfn-type=attr-value><code>nofollow</code></dfn>"<a href=#link-type-nofollow class=self-link></a></h5>

  <p>The <code id=link-type-nofollow:link-type-nofollow><a href=#link-type-nofollow>nofollow</a></code> keyword may be used with <code id=link-type-nofollow:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
  <code id=link-type-nofollow:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-nofollow:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword does not create a
  <a href=#hyperlink id=link-type-nofollow:hyperlink>hyperlink</a>, but <a href=#hyperlink-annotation id=link-type-nofollow:hyperlink-annotation>annotates</a> any other
  hyperlinks created by the element (the implied hyperlink, if no other keywords create one).</p>

  <p>The <code id=link-type-nofollow:link-type-nofollow-2><a href=#link-type-nofollow>nofollow</a></code> keyword indicates that the link is not endorsed
  by the original author or publisher of the page, or that the link to the referenced document was
  included primarily because of a commercial relationship between people affiliated with the two
  pages.</p>


  <h5 id=link-type-noopener><span class=secno>4.6.7.14</span> Link type "<dfn data-dfn-for=a/rel,area/rel,form/rel data-dfn-type=attr-value><code>noopener</code></dfn>"<a href=#link-type-noopener class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener title="The noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).">Link_types/noopener</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>52+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener title="The noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).">Link_types/noopener</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>52+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>49+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-noopener:link-type-noopener><a href=#link-type-noopener>noopener</a></code> keyword may be used with <code id=link-type-noopener:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
  <code id=link-type-noopener:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-noopener:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword does not create a
  <a href=#hyperlink id=link-type-noopener:hyperlink>hyperlink</a>, but <a href=#hyperlink-annotation id=link-type-noopener:hyperlink-annotation>annotates</a> any other
  hyperlinks created by the element (the implied hyperlink, if no other keywords create one).</p>

  <p>The keyword indicates that any newly created <a id=link-type-noopener:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a> which results
  from following the <a href=#hyperlink id=link-type-noopener:hyperlink-2>hyperlink</a> will not contain an <a id=link-type-noopener:auxiliary-browsing-context href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing
  context</a>. E.g., the resulting <code id=link-type-noopener:window><a href=nav-history-apis.html#window>Window</a></code>'s <code id=link-type-noopener:dom-opener><a href=nav-history-apis.html#dom-opener>opener</a></code>
  getter will return null.</p>

  <p class=note>See also the <a href=document-sequences.html#noopener>processing model</a>.</p>

  <div class=example>
   <p>This typically creates a <a id=link-type-noopener:top-level-traversable-2 href=document-sequences.html#top-level-traversable>top-level traversable</a> with an <a id=link-type-noopener:auxiliary-browsing-context-2 href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing
   context</a> (assuming there is no existing <a id=link-type-noopener:navigable href=document-sequences.html#navigable>navigable</a> whose <a href=document-sequences.html#nav-target id=link-type-noopener:nav-target>target name</a> is "<code>example</code>"):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>help.html</c-> <c- e>target</c-><c- o>=</c-><c- s>example</c-><c- p>&gt;</c->Help!<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

   <p>This creates a <a id=link-type-noopener:top-level-traversable-3 href=document-sequences.html#top-level-traversable>top-level traversable</a> with a non-<a id=link-type-noopener:auxiliary-browsing-context-3 href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing
   context</a> (assuming the same thing):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>help.html</c-> <c- e>target</c-><c- o>=</c-><c- s>example</c-> <c- e>rel</c-><c- o>=</c-><c- s>noopener</c-><c- p>&gt;</c->Help!<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

   <p>These are equivalent and only navigate the <a href=document-sequences.html#nav-parent id=link-type-noopener:nav-parent>parent
   navigable</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>index.html</c-> <c- e>target</c-><c- o>=</c-><c- s>_parent</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>
   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>index.html</c-> <c- e>target</c-><c- o>=</c-><c- s>_parent</c-> <c- e>rel</c-><c- o>=</c-><c- s>noopener</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h5 id=link-type-noreferrer><span class=secno>4.6.7.15</span> Link type "<dfn data-dfn-for=a/rel,area/rel,form/rel data-dfn-type=attr-value><code>noreferrer</code></dfn>"<a href=#link-type-noreferrer class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noreferrer title="The noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.">Link_types/noreferrer</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Partial implementation.">🔰 11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noreferrer title="The noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.">Link_types/noreferrer</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Partial implementation.">🔰 11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-noreferrer:link-type-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword may be used with <code id=link-type-noreferrer:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
  <code id=link-type-noreferrer:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-noreferrer:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword does not create a
  <a href=#hyperlink id=link-type-noreferrer:hyperlink>hyperlink</a>, but <a href=#hyperlink-annotation id=link-type-noreferrer:hyperlink-annotation>annotates</a> any other
  hyperlinks created by the element (the implied hyperlink, if no other keywords create one).</p>

  <p>It indicates that no referrer information is to be leaked when following the link and also
  implies the <code id=link-type-noreferrer:link-type-noopener><a href=#link-type-noopener>noopener</a></code> keyword behavior under the same
  conditions.</p>

  <p class=note>See also the <a href=#noreferrer-a-area-processing-model>processing
  model</a> where referrer is directly manipulated.</p>

  <p class=example><code>&lt;a href="..." rel="noreferrer" target="_blank"></code>
  has the same behavior as <code>&lt;a href="..." rel="noreferrer noopener" target="_blank"></code>.</p>


  <h5 id=link-type-opener><span class=secno>4.6.7.16</span> Link type "<dfn data-dfn-for=a/rel,area/rel,form/rel data-dfn-type=attr-value><code>opener</code></dfn>"<a href=#link-type-opener class=self-link></a></h5>

  <p>The <code id=link-type-opener:link-type-opener><a href=#link-type-opener>opener</a></code> keyword may be used with <code id=link-type-opener:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
  <code id=link-type-opener:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-opener:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword does not create a
  <a href=#hyperlink id=link-type-opener:hyperlink>hyperlink</a>, but <a href=#hyperlink-annotation id=link-type-opener:hyperlink-annotation>annotates</a> any other
  hyperlinks created by the element (the implied hyperlink, if no other keywords create one).</p>

  <p>The keyword indicates that any newly created <a id=link-type-opener:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a> which results
  from following the <a href=#hyperlink id=link-type-opener:hyperlink-2>hyperlink</a> will contain an <a id=link-type-opener:auxiliary-browsing-context href=document-sequences.html#auxiliary-browsing-context>auxiliary browsing
  context</a>.</p>

  <p class=note>See also the <a href=#opener-processing-model>processing model</a>.</p>

  <div class=example>
   <p>In the following example the <code id=link-type-opener:link-type-opener-2><a href=#link-type-opener>opener</a></code> is used to allow the help
   page popup to navigate its opener, e.g., in case what the user is looking for can be found
   elsewhere. An alternative might be to use a named target, rather than <code>_blank</code>, but this has the potential to clash with existing names.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;...&quot;</c-> <mark><c- e>rel</c-><c- o>=</c-><c- s>opener</c-></mark> <c- e>target</c-><c- o>=</c-><c- s>_blank</c-><c- p>&gt;</c->Help!<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h5 id=link-type-pingback><span class=secno>4.6.7.17</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>pingback</code></dfn>"<a href=#link-type-pingback class=self-link></a></h5>

  <p>The <code id=link-type-pingback:link-type-pingback><a href=#link-type-pingback>pingback</a></code> keyword may be used with <code id=link-type-pingback:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#external-resource-link id=link-type-pingback:external-resource-link>external resource
  link</a>. This keyword is <a href=#body-ok id=link-type-pingback:body-ok>body-ok</a>.</p>

  <p>For the semantics of the <code id=link-type-pingback:link-type-pingback-2><a href=#link-type-pingback>pingback</a></code> keyword, see
  <cite>Pingback 1.0</cite>. <a href=references.html#refsPINGBACK>[PINGBACK]</a></p>


  <h5 id=link-type-preconnect><span class=secno>4.6.7.18</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>preconnect</code></dfn>"<a href=#link-type-preconnect class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect title="The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).">Link_types/preconnect</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>39+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>46+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>4.0+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-preconnect:link-type-preconnect><a href=#link-type-preconnect>preconnect</a></code> keyword may be used with <code id=link-type-preconnect:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#external-resource-link id=link-type-preconnect:external-resource-link>external resource
  link</a>. This keyword is <a href=#body-ok id=link-type-preconnect:body-ok>body-ok</a>.</p>

  <p>The <code id=link-type-preconnect:link-type-preconnect-2><a href=#link-type-preconnect>preconnect</a></code> keyword indicates that preemptively
  initiating a connection to the <a id=link-type-preconnect:concept-origin href=browsers.html#concept-origin>origin</a> of the specified resource is likely to be
  beneficial, as it is highly likely that the user will require resources located at that
  <a id=link-type-preconnect:concept-origin-2 href=browsers.html#concept-origin>origin</a>, and the user experience would be improved by preempting the latency costs
  associated with establishing the connection.</p>

  <p>There is no default type for resources given by the <code id=link-type-preconnect:link-type-preconnect-3><a href=#link-type-preconnect>preconnect</a></code> keyword.</p>

  <p>A user agent must not <a id=link-type-preconnect:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> for this link type.</p>

  <p>The appropriate times to <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-preconnect:fetch-and-process-the-linked-resource>fetch and
  process</a> this type of link are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-preconnect:external-resource-link-2>external resource link</a> is created on a <code id=link-type-preconnect:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-preconnect:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-preconnect:external-resource-link-3>external resource link</a>'s <code id=link-type-preconnect:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-preconnect:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-preconnect:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-preconnect:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-preconnect:external-resource-link-4>external resource link</a> that is already <a id=link-type-preconnect:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.<li><p>When the <code id=link-type-preconnect:attr-link-crossorigin><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code> attribute of the
   <code id=link-type-preconnect:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> element of an <a href=#external-resource-link id=link-type-preconnect:external-resource-link-5>external resource
   link</a> that is already <a id=link-type-preconnect:browsing-context-connected-3 href=infrastructure.html#browsing-context-connected>browsing-context connected</a> is set, changed, or
   removed.</ul>

  <p>The <a id=link-type-preconnect:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> steps for this type of linked resource,
  given a <code id=link-type-preconnect:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>, are to <a href=semantics.html#create-link-options-from-element id=link-type-preconnect:create-link-options-from-element>create link options</a> from <var>el</var> and
  to <a href=#preconnect id=link-type-preconnect:preconnect>preconnect</a> given the result.</p>

  <p>The <a id=link-type-preconnect:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> step for this type of linked resource given a <a href=semantics.html#link-processing-options id=link-type-preconnect:link-processing-options>link processing options</a> <var>options</var> are to
  <a href=#preconnect id=link-type-preconnect:preconnect-2>preconnect</a> given <var>options</var>.</p>

  <p>To <dfn id=preconnect>preconnect</dfn> given a <a id=link-type-preconnect:link-processing-options-2 href=semantics.html#link-processing-options>link processing options</a> <var>options</var>:</p>

  <ol><li><p>If <var>options</var>'s
   <a href=semantics.html#link-options-href id=link-type-preconnect:link-options-href>href</a> is an empty string, return.<li>
    <p>Let <var>url</var> be the result of <a id=link-type-preconnect:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
    <var>options</var>'s <a href=semantics.html#link-options-href id=link-type-preconnect:link-options-href-2>href</a>, relative to
    <var>options</var>'s <a href=semantics.html#link-options-base-url id=link-type-preconnect:link-options-base-url>base URL</a>.</p>

    <p class=XXX>Passing the base URL instead of a document or environment is tracked by <a href=https://github.com/whatwg/html/issues/9715>issue #9715</a>.</p>
   <li><p>If <var>url</var> is failure, then return.<li><p>If <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=link-type-preconnect:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is not an
   <a id=link-type-preconnect:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>, then return.<li><p>Let <var>partitionKey</var> be the result of <a href=https://fetch.spec.whatwg.org/#determine-the-network-partition-key id=link-type-preconnect:determine-the-network-partition-key data-x-internal=determine-the-network-partition-key>determining the network partition key</a> given <var>options</var>'s
   <a href=semantics.html#link-options-environment id=link-type-preconnect:link-options-environment>environment</a>.<li><p>Let <var>useCredentials</var> be true.<li><p>If <var>options</var>'s <a href=semantics.html#link-options-crossorigin id=link-type-preconnect:link-options-crossorigin>crossorigin</a> is
   <a href=urls-and-fetching.html#attr-crossorigin-anonymous id=link-type-preconnect:attr-crossorigin-anonymous>Anonymous</a> and <var>options</var>'s <a href=semantics.html#link-options-origin id=link-type-preconnect:link-options-origin>origin</a> does not
   have the <a id=link-type-preconnect:same-origin href=browsers.html#same-origin>same origin</a> as <var>url</var>'s
   <a href=https://url.spec.whatwg.org/#concept-url-origin id=link-type-preconnect:concept-url-origin data-x-internal=concept-url-origin>origin</a>, then set <var>useCredentials</var> to
   false.<li>
    <p>The user agent should <a id=link-type-preconnect:obtain-a-connection href=https://fetch.spec.whatwg.org/#concept-connection-obtain data-x-internal=obtain-a-connection>obtain a connection</a> given <var>partitionKey</var>,
    <var>url</var>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=link-type-preconnect:concept-url-origin-2 data-x-internal=concept-url-origin>origin</a>, and
    <var>useCredentials</var>.</p>

    <p class=note>This connection is obtained but not used directly. It will remain in the
    <a id=link-type-preconnect:connection-pool href=https://fetch.spec.whatwg.org/#concept-connection-pool data-x-internal=connection-pool>connection pool</a> for subsequent use.</p>

    <p>The user agent should attempt to initiate a preconnect and perform the full connection
    handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins) whenever possible, but is
    allowed to elect to perform a partial handshake (DNS only for HTTP, and DNS or DNS+TCP for
    HTTPS origins), or skip it entirely, due to resource constraints or other reasons.</p>

    <p>The optimal number of connections per origin is dependent on the negotiated protocol, users
    current connectivity profile, available device resources, global connection limits, and other
    context specific variables. As a result, the decision for how many connections should be opened
    is deferred to the user agent.</p>
   </ol>

  <h5 id=link-type-prefetch><span class=secno>4.6.7.19</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>prefetch</code></dfn>"<a href=#link-type-prefetch class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prefetch title="The prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.">Link_types/prefetch</a><div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-prefetch:link-type-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword may be used with <code id=link-type-prefetch:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#external-resource-link id=link-type-prefetch:external-resource-link>external resource
  link</a>. This keyword is <a href=#body-ok id=link-type-prefetch:body-ok>body-ok</a>.</p>

  <p>The <code id=link-type-prefetch:link-type-prefetch-2><a href=#link-type-prefetch>prefetch</a></code> keyword indicates that preemptively <a href=https://fetch.spec.whatwg.org/#concept-fetch id=link-type-prefetch:concept-fetch data-x-internal=concept-fetch>fetching</a> and caching the specified resource or same-site document is
  likely to be beneficial, as it is highly likely that the user will require this resource for
  future navigations.</p>

  <p>There is no default type for resources given by the <code id=link-type-prefetch:link-type-prefetch-3><a href=#link-type-prefetch>prefetch</a></code>
  keyword.</p>

  <p>The appropriate times to <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-prefetch:fetch-and-process-the-linked-resource>fetch and
  process</a> this type of link are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-prefetch:external-resource-link-2>external resource link</a> is created on a <code id=link-type-prefetch:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-prefetch:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-prefetch:external-resource-link-3>external resource link</a>'s <code id=link-type-prefetch:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-prefetch:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-prefetch:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-prefetch:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-prefetch:external-resource-link-4>external resource link</a> that is already <a id=link-type-prefetch:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.<li><p>When the <code id=link-type-prefetch:attr-link-crossorigin><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code> attribute of the
   <code id=link-type-prefetch:the-link-element-5><a href=semantics.html#the-link-element>link</a></code> element of an <a href=#external-resource-link id=link-type-prefetch:external-resource-link-5>external resource
   link</a> that is already <a id=link-type-prefetch:browsing-context-connected-3 href=infrastructure.html#browsing-context-connected>browsing-context connected</a> is set, changed, or
   removed.</ul>

  <p>The <a id=link-type-prefetch:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> algorithm for <code id=link-type-prefetch:link-type-prefetch-4><a href=#link-type-prefetch>prefetch</a></code> links, given a <code id=link-type-prefetch:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> element
  <var>el</var>, is as follows:</p>

  <ol><li><p>If <var>el</var>'s <code id=link-type-prefetch:attr-link-href-2><a href=semantics.html#attr-link-href>href</a></code> attribute's value is the
   empty string, then return.<li><p>Let <var>options</var> be the result of <a href=semantics.html#create-link-options-from-element id=link-type-prefetch:create-link-options-from-element>creating link options</a> from <var>el</var>.<li><p>Set <var>options</var>'s <a href=semantics.html#link-options-destination id=link-type-prefetch:link-options-destination>destination</a> to
   the empty string.<li><p>Let <var>request</var> be the result of <a href=semantics.html#create-a-link-request id=link-type-prefetch:create-a-link-request>creating a
   link request</a> given <var>options</var>.<li><p>If <var>request</var> is null, then return.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-initiator id=link-type-prefetch:concept-request-initiator data-x-internal=concept-request-initiator>initiator</a> to
   "<code>prefetch</code>".<li>
    <p>Let <var>processPrefetchResponse</var> be the following steps given a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-prefetch:concept-response data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a
    <a id=link-type-prefetch:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bytesOrNull</var>:</p>

    <ol><li><p>If <var>response</var> is a <a id=link-type-prefetch:network-error href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a>, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-prefetch:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=link-type-prefetch:event-error><a href=indices.html#event-error>error</a></code> at <var>el</var>.<li><p>Otherwise, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-prefetch:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=link-type-prefetch:event-load><a href=indices.html#event-load>load</a></code> at <var>el</var>.</ol>
   <li><p>The user agent should <a href=https://fetch.spec.whatwg.org/#concept-fetch id=link-type-prefetch:concept-fetch-2 data-x-internal=concept-fetch>fetch</a> <var>request</var>, with
   <i id=link-type-prefetch:processresponseconsumebody><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to
   <var>processPrefetchResponse</var>. User agents may delay the fetching of <var>request</var> to
   prioritize other requests that are necessary for the current document.</ol>

  <p>The <a id=link-type-prefetch:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> steps for this type of linked resource are to do
  nothing.</p>

  <h5 id=link-type-preload><span class=secno>4.6.7.20</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>preload</code></dfn>"<a href=#link-type-preload class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload title="The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term load, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.">Link_types/preload</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>85+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome yes"><span>Chrome</span><span title="Partial implementation.">🔰 50+</span></span><hr><span class="opera yes"><span>Opera</span><span>37+</span></span><span class="edge_blink yes"><span>Edge</span><span title="Partial implementation.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie unknown"><span>Internet Explorer</span><span>?</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>50+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>5.0+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <code id=link-type-preload:link-type-preload><a href=#link-type-preload>preload</a></code> keyword may be used with <code id=link-type-preload:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#external-resource-link id=link-type-preload:external-resource-link>external resource
  link</a>. This keyword is <a href=#body-ok id=link-type-preload:body-ok>body-ok</a>.</p>

  <p>The <code id=link-type-preload:link-type-preload-2><a href=#link-type-preload>preload</a></code> keyword indicates that the user agent will
  preemptively <a href=https://fetch.spec.whatwg.org/#concept-fetch id=link-type-preload:concept-fetch data-x-internal=concept-fetch>fetch</a> and cache the specified resource according
  to the <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=link-type-preload:concept-potential-destination data-x-internal=concept-potential-destination>potential destination</a> given by the
  <code id=link-type-preload:attr-link-as><a href=semantics.html#attr-link-as>as</a></code> attribute, and the <a href=https://fetch.spec.whatwg.org/#request-priority id=link-type-preload:concept-request-priority data-x-internal=concept-request-priority>priority</a> given by the <code id=link-type-preload:attr-link-fetchpriority><a href=semantics.html#attr-link-fetchpriority>fetchpriority</a></code> attribute, as it is highly likely that the
  user will require this resource for the current navigation.

  <p class=note>User-agents might perform additional operations when a resource is loaded, such as
  preemptively <a href=embedded-content.html#dom-img-decode id=link-type-preload:dom-img-decode>decoding images</a> or <a href=https://drafts.csswg.org/cssom/#create-a-css-style-sheet id=link-type-preload:create-a-css-style-sheet data-x-internal=create-a-css-style-sheet>creating stylesheets</a>. However, these additional
  operations cannot have observable effects.</p>

  <p>There is no default type for resources given by the <code id=link-type-preload:link-type-preload-3><a href=#link-type-preload>preload</a></code>
  keyword.</p>

  <p>A user agent must not <a id=link-type-preload:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> for this link type.</p>

  <p>The appropriate times to <a id=link-type-preload:fetch-and-process-the-linked-resource href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> for such a link
   are:</p>

  <ul><li><p>When the <a href=#external-resource-link id=link-type-preload:external-resource-link-2>external resource link</a> is created on a <code id=link-type-preload:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-preload:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-preload:external-resource-link-3>external resource link</a>'s <code id=link-type-preload:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-preload:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-preload:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-preload:the-link-element-4><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-preload:external-resource-link-4>external resource link</a> that is already <a id=link-type-preload:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.<li><p>When the <code id=link-type-preload:attr-link-as-2><a href=semantics.html#attr-link-as>as</a></code> attribute of the <code id=link-type-preload:the-link-element-5><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-preload:external-resource-link-5>external resource link</a> that is already <a id=link-type-preload:browsing-context-connected-3 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.<li><p>When the <code id=link-type-preload:attr-link-type><a href=semantics.html#attr-link-type>type</a></code> attribute of the <code id=link-type-preload:the-link-element-6><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-preload:external-resource-link-6>external resource link</a> that is already <a id=link-type-preload:browsing-context-connected-4 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a>, but was previously not obtained due to the <code id=link-type-preload:attr-link-type-2><a href=semantics.html#attr-link-type>type</a></code> attribute specifying an unsupported type for the request
   <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=link-type-preload:concept-request-destination data-x-internal=concept-request-destination>destination</a>, is set, removed, or
   changed.<li><p>When the <code id=link-type-preload:attr-link-media><a href=semantics.html#attr-link-media>media</a></code> attribute of the <code id=link-type-preload:the-link-element-7><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-preload:external-resource-link-7>external resource link</a> that is already <a id=link-type-preload:browsing-context-connected-5 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a>, but was previously not obtained due to the <code id=link-type-preload:attr-link-media-2><a href=semantics.html#attr-link-media>media</a></code> attribute not
   <a href=common-microsyntaxes.html#matches-the-environment id=link-type-preload:matches-the-environment>matching the environment</a>, is changed or
   removed.</ul>

  <p>A <code id=link-type-preload:document><a href=dom.html#document>Document</a></code> has a <dfn id=map-of-preloaded-resources>map of preloaded resources</dfn>, which is an
  <a id=link-type-preload:ordered-map href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, initially empty.</p>

  <p>A <dfn id=preload-key>preload key</dfn> is a <a id=link-type-preload:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a>. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=link-type-preload:struct-item data-x-internal=struct-item>items</a>:</p>

  <dl><dt><dfn id=preload-url>URL</dfn>
   <dd>A <a id=link-type-preload:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>

   <dt><dfn id=preload-destination>destination</dfn>
   <dd>A string

   <dt><dfn id=preload-mode>mode</dfn>
   <dd>A <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=link-type-preload:concept-request-mode data-x-internal=concept-request-mode>request mode</a>, either
   "<code>same-origin</code>", "<code>cors</code>", or
   "<code>no-cors</code>"

   <dt><dfn id=preload-credentials-mode>credentials mode</dfn>
   <dd>A <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=link-type-preload:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a>
  </dl>

  <p>A <dfn id=preload-entry>preload entry</dfn> is a <a id=link-type-preload:struct-2 href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a>. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=link-type-preload:struct-item-2 data-x-internal=struct-item>items</a>:</p>

  <dl><dt><dfn id=preload-integrity-metadata>integrity metadata</dfn>
   <dd>A string

   <dt><dfn id=preload-response>response</dfn>
   <dd>Null or a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response data-x-internal=concept-response>response</a>

   <dt><dfn id=preload-on-response-available>on response available</dfn>
   <dd>Null, or an algorithm accepting a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response-2 data-x-internal=concept-response>response</a> or null
  </dl>

  <p>To <dfn id=consume-a-preloaded-resource data-export="">consume a preloaded resource</dfn> for <code id=link-type-preload:window><a href=nav-history-apis.html#window>Window</a></code> <var>window</var>,
  given a <a id=link-type-preload:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, a string <var>destination</var>, a string
  <var>mode</var>, a string <var>credentialsMode</var>, a string <var>integrityMetadata</var>, and
  <var>onResponseAvailable</var>, which is an algorithm accepting a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response-3 data-x-internal=concept-response>response</a>:</p>

  <ol><li><p>Let <var>key</var> be a <a href=#preload-key id=link-type-preload:preload-key>preload key</a> whose <a href=#preload-url id=link-type-preload:preload-url>URL</a> is <var>url</var>, <a href=#preload-destination id=link-type-preload:preload-destination>destination</a> is
   <var>destination</var>, <a href=#preload-mode id=link-type-preload:preload-mode>mode</a> is <var>mode</var>, and
   <a href=#preload-credentials-mode id=link-type-preload:preload-credentials-mode>credentials mode</a> is
   <var>credentialsMode</var>.<li><p>Let <var>preloads</var> be <var>window</var>'s <a href=nav-history-apis.html#concept-document-window id=link-type-preload:concept-document-window>associated <code>Document</code></a>'s <a href=#map-of-preloaded-resources id=link-type-preload:map-of-preloaded-resources>map of
   preloaded resources</a>.<li><p>If <var>key</var> does not <a href=https://infra.spec.whatwg.org/#map-exists id=link-type-preload:map-exists data-x-internal=map-exists>exist</a> in <var>preloads</var>,
   then return false.<li><p>Let <var>entry</var> be <var>preloads</var>[<var>key</var>].<li><p>Let <var>consumerIntegrityMetadata</var> be the result of
   <a href=https://w3c.github.io/webappsec-subresource-integrity/#parse-metadata id=link-type-preload:parse-integrity-metadata data-x-internal=parse-integrity-metadata>parsing</a> <var>integrityMetadata</var>.<li><p>Let <var>preloadIntegrityMetadata</var> be the result of
   <a href=https://w3c.github.io/webappsec-subresource-integrity/#parse-metadata id=link-type-preload:parse-integrity-metadata-2 data-x-internal=parse-integrity-metadata>parsing</a> <var>entry</var>'s
   <a href=#preload-integrity-metadata id=link-type-preload:preload-integrity-metadata>integrity metadata</a>.<li>
    <p>If none of the following conditions apply:</p>

    <ul><li><p><var>consumerIntegrityMetadata</var> is <code>no metadata</code>;<li>
      <p><var>consumerIntegrityMetadata</var> is equal to <var>preloadIntegrityMetadata</var>;
      or</p>

      <p class=XXX>This comparison would ignore unknown integrity options. See <a href=https://github.com/w3c/webappsec-subresource-integrity/issues/116>issue #116.</a></p>
     </ul>

    <p>then return false.</p>

    <p class=note>A mismatch in integrity metadata between the preload and the consumer, even if
    both match the data, would lead to an additional fetch from the network.</p>

    <p class=note>It is important that <a href=https://fetch.spec.whatwg.org/#concept-network-error id=link-type-preload:network-error data-x-internal=network-error>network errors</a> are
    added to the preload cache so that if a preload request results in an error, the erroneous
    response isn't re-requested from the network later. This also has security implications;
    consider the case where a developer specifies subresource integrity metadata on a preload
    request, but not the following resource request. If the preload request fails subresource
    integrity verification and is discarded, the resource request will fetch and consume a
    potentially-malicious response from the network without verifying its integrity.
    <a href=references.html#refsSRI>[SRI]</a></p>
   <li><p><a href=https://infra.spec.whatwg.org/#map-remove id=link-type-preload:map-remove data-x-internal=map-remove>Remove</a> <var>preloads</var>[<var>key</var>].<li><p>If <var>entry</var>'s <a href=#preload-response id=link-type-preload:preload-response>response</a> is null, then set
   <var>entry</var>'s <a href=#preload-on-response-available id=link-type-preload:preload-on-response-available>on response available</a> to
   <var>onResponseAvailable</var>.<li><p>Otherwise, call <var>onResponseAvailable</var> with <var>entry</var>'s <a href=#preload-response id=link-type-preload:preload-response-2>response</a>.<li><p>Return true.</ol>

  <p>For the purposes of this section, a string <var>type</var>
  <dfn id=match-preload-type>matches</dfn> a string <var>destination</var> if the following
  algorithm returns true:</p>
  <ol><li><p>If <var>type</var> is an empty string, then return true.<li><p>If <var>destination</var> is "<code>fetch</code>", then return true.<li><p>Let <var>mimeTypeRecord</var> be the result of
   <a href=https://mimesniff.spec.whatwg.org/#parse-a-mime-type id=link-type-preload:parse-a-mime-type data-x-internal=parse-a-mime-type>parsing</a> <var>type</var>.<li><p>If <var>mimeTypeRecord</var> is failure, then return false.<li><p>If <var>mimeTypeRecord</var> is not <a href=https://mimesniff.spec.whatwg.org/#supported-by-the-user-agent id=link-type-preload:is-mime-type-supported-by-the-user-agent data-x-internal=is-mime-type-supported-by-the-user-agent>supported by the user agent</a>, then
   return false.</p>

   <li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>destination</var> is "<code>audio</code>" or "<code>video</code>", and <var>mimeTypeRecord</var> is an
     <a id=link-type-preload:audio-or-video-mime-type href=https://mimesniff.spec.whatwg.org/#audio-or-video-mime-type data-x-internal=audio-or-video-mime-type>audio or video MIME type</a>;<li><p><var>destination</var> is a
     <a href=https://fetch.spec.whatwg.org/#request-destination-script-like id=link-type-preload:concept-script-like-destination data-x-internal=concept-script-like-destination>script-like destination</a> and
     <var>mimeTypeRecord</var> is a <a id=link-type-preload:javascript-mime-type href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>;<li><p><var>destination</var> is "<code>image</code>" and
     <var>mimeTypeRecord</var> is an <a id=link-type-preload:image-mime-type href=https://mimesniff.spec.whatwg.org/#image-mime-type data-x-internal=image-mime-type>image MIME type</a>;<li><p><var>destination</var> is "<code>font</code>" and
     <var>mimeTypeRecord</var> is a <a id=link-type-preload:font-mime-type href=https://mimesniff.spec.whatwg.org/#font-mime-type data-x-internal=font-mime-type>font MIME type</a>;<li><p><var>destination</var> is "<code>json</code>" and
     <var>mimeTypeRecord</var> is a <a id=link-type-preload:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a>;<li><p><var>destination</var> is "<code>style</code>" and
     <var>mimeTypeRecord</var>'s <a href=https://mimesniff.spec.whatwg.org/#mime-type-essence id=link-type-preload:mime-type-essence data-x-internal=mime-type-essence>essence</a> is
     <code id=link-type-preload:text/css><a href=indices.html#text/css>text/css</a></code>; or<li><p><var>destination</var> is "<code>track</code>" and
     <var>mimeTypeRecord</var>'s <a href=https://mimesniff.spec.whatwg.org/#mime-type-essence id=link-type-preload:mime-type-essence-2 data-x-internal=mime-type-essence>essence</a> is
     <code id=link-type-preload:text/vtt><a href=indices.html#text/vtt>text/vtt</a></code>,</ul>

    <p>then return true.</p>
   <li><p>Return false.</ol>

  <p>To <dfn id=create-a-preload-key>create a preload key</dfn> for a <a href=https://fetch.spec.whatwg.org/#concept-request id=link-type-preload:concept-request data-x-internal=concept-request>request</a>
  <var>request</var>, return a new <a href=#preload-key id=link-type-preload:preload-key-2>preload key</a> whose <a href=#preload-url id=link-type-preload:preload-url-2>URL</a> is <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-url id=link-type-preload:concept-request-url data-x-internal=concept-request-url>URL</a>, <a href=#preload-destination id=link-type-preload:preload-destination-2>destination</a> is <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=link-type-preload:concept-request-destination-2 data-x-internal=concept-request-destination>destination</a>, <a href=#preload-mode id=link-type-preload:preload-mode-2>mode</a> is <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=link-type-preload:concept-request-mode-2 data-x-internal=concept-request-mode>mode</a>, and
  <a href=#preload-credentials-mode id=link-type-preload:preload-credentials-mode-2>credentials mode</a> is <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=link-type-preload:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a>.</p>

  <p>To <dfn id=translate-a-preload-destination>translate a preload destination</dfn> given a string <var>destination</var>:</p>

  <ol><li><p>If <var>destination</var> is not "<code>fetch</code>", "<code>font</code>",
   "<code>image</code>", "<code>script</code>", "<code>style</code>",
   or "<code>track</code>", then return null.<li><p>Return the result of <a href=https://fetch.spec.whatwg.org/#concept-potential-destination-translate id=link-type-preload:concept-potential-destination-translate data-x-internal=concept-potential-destination-translate>translating</a>
   <var>destination</var>.</ol>

  <p>To <dfn id=preload>preload</dfn> given a <a href=semantics.html#link-processing-options id=link-type-preload:link-processing-options>link processing options</a> <var>options</var> and
  an optional <var>processResponse</var>, which is an algorithm accepting a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response-4 data-x-internal=concept-response>response</a>:</p>

  <ol><li><p>If <var>options</var>'s <a href=semantics.html#link-options-type id=link-type-preload:link-options-type>type</a> doesn't <a href=#match-preload-type id=link-type-preload:match-preload-type>match</a> <var>options</var>'s <a href=semantics.html#link-options-destination id=link-type-preload:link-options-destination>destination</a>, then return.<li><p>If <var>options</var>'s <a href=semantics.html#link-options-destination id=link-type-preload:link-options-destination-2>destination</a> is
   "<code>image</code>" and <var>options</var>'s <a href=semantics.html#link-options-source-set id=link-type-preload:link-options-source-set>source set</a> is not null, then set <var>options</var>'s <a href=semantics.html#link-options-href id=link-type-preload:link-options-href>href</a> to the result of <a href=images.html#select-an-image-source-from-a-source-set id=link-type-preload:select-an-image-source-from-a-source-set>selecting an image source</a> from <var>options</var>'s <a href=semantics.html#link-options-source-set id=link-type-preload:link-options-source-set-2>source set</a>.<li><p>Let <var>request</var> be the result of <a href=semantics.html#create-a-link-request id=link-type-preload:create-a-link-request>creating a
   link request</a> given <var>options</var>.<li><p>If <var>request</var> is null, then return.<li><p>Let <var>unsafeEndTime</var> be 0.<li><p>Let <var>entry</var> be a new <a href=#preload-entry id=link-type-preload:preload-entry>preload entry</a> whose
   <a href=#preload-integrity-metadata id=link-type-preload:preload-integrity-metadata-2>integrity metadata</a> is <var>options</var>'s
   <a href=semantics.html#link-options-integrity id=link-type-preload:link-options-integrity>integrity</a>.<li><p>Let <var>key</var> be the result of <a href=#create-a-preload-key id=link-type-preload:create-a-preload-key>creating a
   preload key</a> given <var>request</var>.<li><p>If <var>options</var>'s <a href=semantics.html#link-options-document id=link-type-preload:link-options-document>document</a> is null, then
   set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=link-type-preload:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator type</a> to
   "<code>early hint</code>".<li><p>Let <var>controller</var> be null.<li><p>Let <var>reportTiming</var> given a <code id=link-type-preload:document-2><a href=dom.html#document>Document</a></code> <var>document</var> be to
   <a id=link-type-preload:report-timing href=https://fetch.spec.whatwg.org/#finalize-and-report-timing data-x-internal=report-timing>report timing</a> for <var>controller</var> given <var>document</var>'s <a id=link-type-preload:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant
   global object</a>.<li>
    <p>Set <var>controller</var> to the result of <a href=https://fetch.spec.whatwg.org/#concept-fetch id=link-type-preload:concept-fetch-2 data-x-internal=concept-fetch>fetching</a> <var>request</var>, with <i id=link-type-preload:processresponseconsumebody><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to the following steps
    given a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response-5 data-x-internal=concept-response>response</a> <var>response</var> and null, failure,
    or a <a id=link-type-preload:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>:</p>

    <ol><li>
      <p>If <var>bodyBytes</var> is a <a id=link-type-preload:byte-sequence-2 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a>, then set <var>response</var>'s
      <a href=https://fetch.spec.whatwg.org/#concept-response-body id=link-type-preload:concept-response-body data-x-internal=concept-response-body>body</a> to <var>bodyBytes</var> <a id=link-type-preload:as-a-body href=https://fetch.spec.whatwg.org/#byte-sequence-as-a-body data-x-internal=as-a-body>as a
      body</a>.</p>

      <p class=note>By using <i id=link-type-preload:processresponseconsumebody-2><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i>,
      we have <a href=https://fetch.spec.whatwg.org/#bodyinit-safely-extract id=link-type-preload:body-safely-extract data-x-internal=body-safely-extract>extracted</a> the entire <a href=https://fetch.spec.whatwg.org/#concept-response-body id=link-type-preload:concept-response-body-2 data-x-internal=concept-response-body>body</a>. This is necessary to ensure the preloader loads the
      entire body from the network, regardless of whether the preload will be consumed (which is
      uncertain at this point). This step then resets the request's body to a new body containing the
      same bytes, so that other specifications can read from it at the time of actual consumption,
      despite us having already done so once.</p>
     <li><p>Otherwise, set <var>response</var> to a <a id=link-type-preload:network-error-2 href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a>.<li><p>Set <var>unsafeEndTime</var> to the <a id=link-type-preload:unsafe-shared-current-time href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li><p>If <var>options</var>'s <a href=semantics.html#link-options-document id=link-type-preload:link-options-document-2>document</a> is not
     null, then call <var>reportTiming</var> given <var>options</var>'s <a href=semantics.html#link-options-document id=link-type-preload:link-options-document-3>document</a>.<li><p>If <var>entry</var>'s <a href=#preload-on-response-available id=link-type-preload:preload-on-response-available-2>on response
     available</a> is null, then set <var>entry</var>'s <a href=#preload-response id=link-type-preload:preload-response-3>response</a> to <var>response</var>; otherwise call <var>entry</var>'s <a href=#preload-on-response-available id=link-type-preload:preload-on-response-available-3>on response available</a> given
     <var>response</var>.<li><p>If <var>processResponse</var> is given, then call <var>processResponse</var> with
     <var>response</var>.</ol>
   <li>
    <p>Let <var>commit</var> be the following steps given a <code id=link-type-preload:document-3><a href=dom.html#document>Document</a></code>
    <var>document</var>:</p>

    <ol><li><p>If <var>entry</var>'s <a href=#preload-response id=link-type-preload:preload-response-4>response</a> is not null, then
     call <var>reportTiming</var> given <var>document</var>.<li><p>Set <var>document</var>'s <a href=#map-of-preloaded-resources id=link-type-preload:map-of-preloaded-resources-2>map of preloaded resources</a>[<var>key</var>] to
     <var>entry</var>.</ol>
   <li><p>If <var>options</var>'s <a href=semantics.html#link-options-document id=link-type-preload:link-options-document-4>document</a> is null, then set <var>options</var>'s <a href=semantics.html#link-options-on-document-ready id=link-type-preload:link-options-on-document-ready>on document ready</a> to <var>commit</var>.
   Otherwise, call <var>commit</var> with <var>options</var>'s <a href=semantics.html#link-options-document id=link-type-preload:link-options-document-5>document</a>.</ol>

  <p>The <a id=link-type-preload:fetch-and-process-the-linked-resource-2 href=semantics.html#fetch-and-process-the-linked-resource>fetch and process the linked resource</a> steps for this type of linked resource,
  given a <code id=link-type-preload:the-link-element-8><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>, are:</p>

  <ol><li><p><a id=link-type-preload:update-the-source-set href=images.html#update-the-source-set>Update the source set</a> for <var>el</var>.<li><p>Let <var>options</var> be the result of <a href=semantics.html#create-link-options-from-element id=link-type-preload:create-link-options-from-element>creating link options</a> from
   <var>el</var>.<li>
    <p><a href=#preload id=link-type-preload:preload>Preload</a> <var>options</var>, with the following steps given a <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-preload:concept-response-6 data-x-internal=concept-response>response</a> <var>response</var>:

    <ol><li>
      <p>If <var>response</var> is a <a id=link-type-preload:network-error-3 href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a>, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-preload:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=link-type-preload:event-error><a href=indices.html#event-error>error</a></code> at <var>el</var>. Otherwise, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-preload:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named
      <code id=link-type-preload:event-load><a href=indices.html#event-load>load</a></code> at <var>el</var>.</p>

      <p class=XXX>The actual browsers' behavior is different from the spec here, and the
      feasibility of changing the behavior has not yet been investigated. See <a href=https://github.com/whatwg/html/issues/1142>issue #1142</a>.</p>
     </ol>
   </ol>

  <p>The <a id=link-type-preload:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> step for this type of link
  given a <a href=semantics.html#link-processing-options id=link-type-preload:link-processing-options-2>link processing options</a> <var>options</var>
  is to <a href=#preload id=link-type-preload:preload-2>preload</a> <var>options</var>.</p>


  <h5 id=link-type-privacy-policy><span class=secno>4.6.7.21</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel data-dfn-type=attr-value><code>privacy-policy</code></dfn>"<a href=#link-type-privacy-policy class=self-link></a></h5>

  <p>The <code id=link-type-privacy-policy:link-type-privacy-policy><a href=#link-type-privacy-policy>privacy-policy</a></code> keyword may be used with
  <code id=link-type-privacy-policy:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=link-type-privacy-policy:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=link-type-privacy-policy:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-privacy-policy:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-privacy-policy:link-type-privacy-policy-2><a href=#link-type-privacy-policy>privacy-policy</a></code> keyword indicates that the
  referenced document contains information about the data collection and usage practices that apply
  to the current document, as described in more detail in <cite>Additional Link Relation
  Types</cite>. The referenced document may be a standalone privacy policy, or a specific section of
  some more general document. <a href=references.html#refsRFC6903>[RFC6903]</a></p>


  <h5 id=link-type-search><span class=secno>4.6.7.22</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel,form/rel data-dfn-type=attr-value><code>search</code></dfn>"<a href=#link-type-search class=self-link></a></h5>

  <p>The <code id=link-type-search:link-type-search><a href=#link-type-search>search</a></code> keyword may be used with <code id=link-type-search:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-search:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-search:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-search:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-search:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-search:link-type-search-2><a href=#link-type-search>search</a></code> keyword indicates that the referenced document
  provides an interface specifically for searching the document and its related resources.</p>

  <p class=note>OpenSearch description documents can be used with <code id=link-type-search:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements and
  the <code id=link-type-search:link-type-search-3><a href=#link-type-search>search</a></code> link type to enable user agents to autodiscover search
  interfaces. <a href=references.html#refsOPENSEARCH>[OPENSEARCH]</a></p>


  <h5 id=link-type-stylesheet><span class=secno>4.6.7.23</span> Link type "<dfn data-dfn-for=link/rel data-dfn-type=attr-value><code>stylesheet</code></dfn>"<a href=#link-type-stylesheet class=self-link></a></h5>

  <p>The <code id=link-type-stylesheet:link-type-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword may be used with <code id=link-type-stylesheet:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements. This keyword creates an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link>external resource
  link</a> that contributes to the styling processing model. This keyword is
  <a href=#body-ok id=link-type-stylesheet:body-ok>body-ok</a>.</p>

  <p>The specified resource is a <a id=link-type-stylesheet:css-style-sheet href=https://drafts.csswg.org/cssom/#css-style-sheet data-x-internal=css-style-sheet>CSS style sheet</a> that describes how to present the
  document.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>If the <code id=link-type-stylesheet:rel-alternate><a href=#rel-alternate>alternate</a></code> keyword is also specified on the
  <code id=link-type-stylesheet:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> element, then <dfn id=the-link-is-an-alternative-stylesheet>the link is an
  alternative style sheet</dfn>; in this case, the <code id=link-type-stylesheet:attr-title><a href=dom.html#attr-title>title</a></code> attribute
  must be specified on the <code id=link-type-stylesheet:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element, with a non-empty value.</p>

  <p>The default type for resources given by the <code id=link-type-stylesheet:link-type-stylesheet-2><a href=#link-type-stylesheet>stylesheet</a></code>
  keyword is <code id=link-type-stylesheet:text/css><a href=indices.html#text/css>text/css</a></code>.</p>

  <p>A <code id=link-type-stylesheet:the-link-element-4><a href=semantics.html#the-link-element>link</a></code> element of this type is <a id=link-type-stylesheet:implicitly-potentially-render-blocking href=urls-and-fetching.html#implicitly-potentially-render-blocking>implicitly potentially render-blocking</a>
  if the element was created by its <a id=link-type-stylesheet:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s parser.</p>

  

  <p>When the <code id=link-type-stylesheet:attr-link-disabled><a href=semantics.html#attr-link-disabled>disabled</a></code> attribute of a <code id=link-type-stylesheet:the-link-element-5><a href=semantics.html#the-link-element>link</a></code>
  element with a <code id=link-type-stylesheet:link-type-stylesheet-3><a href=#link-type-stylesheet>stylesheet</a></code> keyword is set, <a href=https://drafts.csswg.org/cssom/#disable-a-css-style-sheet id=link-type-stylesheet:disable-a-css-style-sheet data-x-internal=disable-a-css-style-sheet>disable</a> the <a id=link-type-stylesheet:associated-css-style-sheet href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>.</p>

  <p>The appropriate times to <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-stylesheet:fetch-and-process-the-linked-resource>fetch and
  process</a> this type of link are:

  
  <ul><li><p>When the <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-2>external resource link</a> is created on a <code id=link-type-stylesheet:the-link-element-6><a href=semantics.html#the-link-element>link</a></code> element
   that is already <a id=link-type-stylesheet:browsing-context-connected href=infrastructure.html#browsing-context-connected>browsing-context connected</a>.<li><p>When the <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-3>external resource link</a>'s <code id=link-type-stylesheet:the-link-element-7><a href=semantics.html#the-link-element>link</a></code> element <a id=link-type-stylesheet:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes
   browsing-context connected</a>.<li><p>When the <code id=link-type-stylesheet:attr-link-href><a href=semantics.html#attr-link-href>href</a></code> attribute of the <code id=link-type-stylesheet:the-link-element-8><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-4>external resource link</a> that is already <a id=link-type-stylesheet:browsing-context-connected-2 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is changed.<li><p>When the <code id=link-type-stylesheet:attr-link-disabled-2><a href=semantics.html#attr-link-disabled>disabled</a></code> attribute of the
   <code id=link-type-stylesheet:the-link-element-9><a href=semantics.html#the-link-element>link</a></code> element of an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-5>external resource link</a> that is already
   <a id=link-type-stylesheet:browsing-context-connected-3 href=infrastructure.html#browsing-context-connected>browsing-context connected</a> is set, changed, or removed.<li><p>When the <code id=link-type-stylesheet:attr-link-crossorigin><a href=semantics.html#attr-link-crossorigin>crossorigin</a></code> attribute of the
   <code id=link-type-stylesheet:the-link-element-10><a href=semantics.html#the-link-element>link</a></code> element of an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-6>external resource
   link</a> that is already <a id=link-type-stylesheet:browsing-context-connected-4 href=infrastructure.html#browsing-context-connected>browsing-context connected</a> is set, changed, or
   removed.<li><p>When the <code id=link-type-stylesheet:attr-link-type><a href=semantics.html#attr-link-type>type</a></code> attribute of the <code id=link-type-stylesheet:the-link-element-11><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-7>external resource link</a> that is already <a id=link-type-stylesheet:browsing-context-connected-5 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> is set or changed to a value that does not or no longer matches the <a href=urls-and-fetching.html#content-type id=link-type-stylesheet:content-type>Content-Type metadata</a> of the previous obtained external resource, if
   any.<li><p>When the <code id=link-type-stylesheet:attr-link-type-2><a href=semantics.html#attr-link-type>type</a></code> attribute of the <code id=link-type-stylesheet:the-link-element-12><a href=semantics.html#the-link-element>link</a></code>
   element of an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-8>external resource link</a> that is already <a id=link-type-stylesheet:browsing-context-connected-6 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a>, but was previously not obtained due to the <code id=link-type-stylesheet:attr-link-type-3><a href=semantics.html#attr-link-type>type</a></code> attribute specifying an unsupported type, is removed or
   changed.<li><p>When the <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-9>external resource link</a> that is already <a id=link-type-stylesheet:browsing-context-connected-7 href=infrastructure.html#browsing-context-connected>browsing-context
   connected</a> changes from being <a href=#the-link-is-an-alternative-stylesheet id=link-type-stylesheet:the-link-is-an-alternative-stylesheet>an
   alternative style sheet</a> to not being one, or vice versa.</ul>

  <p><strong>Quirk</strong>: If the document has been set to <a id=link-type-stylesheet:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, has the
  <a id=link-type-stylesheet:same-origin href=browsers.html#same-origin>same origin</a> as the <a id=link-type-stylesheet:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the external resource,
  and the <a href=urls-and-fetching.html#content-type id=link-type-stylesheet:content-type-2>Content-Type metadata</a> of the external resource is not a
  supported style sheet type, the user agent must instead assume it to be <code id=link-type-stylesheet:text/css-2><a href=indices.html#text/css>text/css</a></code>.</p>

  <p>The <a id=link-type-stylesheet:linked-resource-fetch-setup-steps href=semantics.html#linked-resource-fetch-setup-steps>linked resource fetch setup steps</a> for this type of linked resource, given a
  <code id=link-type-stylesheet:the-link-element-13><a href=semantics.html#the-link-element>link</a></code> element <var>el</var> and <a href=https://fetch.spec.whatwg.org/#concept-request id=link-type-stylesheet:concept-request data-x-internal=concept-request>request</a>
  <var>request</var>, are:</p>

  <ol><li><p>If <var>el</var>'s <code id=link-type-stylesheet:attr-link-disabled-3><a href=semantics.html#attr-link-disabled>disabled</a></code> attribute is set,
   then return false.<li><p>If <var>el</var> <a id=link-type-stylesheet:contributes-a-script-blocking-style-sheet href=semantics.html#contributes-a-script-blocking-style-sheet>contributes a script-blocking style sheet</a>, <a href=https://infra.spec.whatwg.org/#set-append id=link-type-stylesheet:set-append data-x-internal=set-append>append</a> <var>el</var> to its <a id=link-type-stylesheet:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=link-type-stylesheet:script-blocking-style-sheet-set href=semantics.html#script-blocking-style-sheet-set>script-blocking
   style sheet set</a>.<li><p>If <var>el</var>'s <code id=link-type-stylesheet:attr-link-media><a href=semantics.html#attr-link-media>media</a></code> attribute's value
   <a id=link-type-stylesheet:matches-the-environment href=common-microsyntaxes.html#matches-the-environment>matches the environment</a> and <var>el</var> is
   <a id=link-type-stylesheet:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then <a id=link-type-stylesheet:block-rendering href=dom.html#block-rendering>block rendering</a> on
   <var>el</var>.<li><p>If <var>el</var> is currently <a id=link-type-stylesheet:render-blocking href=dom.html#render-blocking>render-blocking</a>, then set <var>request</var>'s
   <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=link-type-stylesheet:concept-request-render-blocking data-x-internal=concept-request-render-blocking>render-blocking</a> to true.<li><p>Return true.</ol>

  <p class=XXX>See <a href=https://github.com/whatwg/html/issues/968>issue #968</a> for plans
  to use the CSSOM <a href=https://drafts.csswg.org/cssom/#fetching-css-style-sheets>fetch a CSS
  style sheet</a> algorithm instead of the <a id=link-type-stylesheet:default-fetch-and-process-the-linked-resource href=semantics.html#default-fetch-and-process-the-linked-resource>default fetch and process the linked
  resource</a> algorithm. In the meantime, any <a href=infrastructure.html#critical-subresources id=link-type-stylesheet:critical-subresources>critical
  subresource</a> <a href=https://fetch.spec.whatwg.org/#concept-request id=link-type-stylesheet:concept-request-2 data-x-internal=concept-request>request</a> should have its <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=link-type-stylesheet:concept-request-render-blocking-2 data-x-internal=concept-request-render-blocking>render-blocking</a> set to whether or not the
  <code id=link-type-stylesheet:the-link-element-14><a href=semantics.html#the-link-element>link</a></code> element is currently <a id=link-type-stylesheet:render-blocking-2 href=dom.html#render-blocking>render-blocking</a>.</p>

  <p>To <a href=semantics.html#process-the-linked-resource id=link-type-stylesheet:process-the-linked-resource>process this type of linked resource</a>
  given a <code id=link-type-stylesheet:the-link-element-15><a href=semantics.html#the-link-element>link</a></code> element <var>el</var>, boolean <var>success</var>, <a href=https://fetch.spec.whatwg.org/#concept-response id=link-type-stylesheet:concept-response data-x-internal=concept-response>response</a> <var>response</var>, and <a id=link-type-stylesheet:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a>
  <var>bodyBytes</var>:</p>

  
  

  <ol><li><p>If the resource's <a href=urls-and-fetching.html#content-type id=link-type-stylesheet:content-type-3>Content-Type metadata</a> is not
   <code id=link-type-stylesheet:text/css-3><a href=indices.html#text/css>text/css</a></code>, then set <var>success</var> to false.<li>
    <p>If <var>el</var> no longer creates an <a href=#external-resource-link id=link-type-stylesheet:external-resource-link-10>external resource link</a> that contributes to
    the styling processing model, or if, since the resource in question was <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-stylesheet:fetch-and-process-the-linked-resource-2>fetched</a>, it has become appropriate to <a href=semantics.html#fetch-and-process-the-linked-resource id=link-type-stylesheet:fetch-and-process-the-linked-resource-3>fetch</a> it again, then:</p>

    <ol><li><p><a href=https://infra.spec.whatwg.org/#list-remove id=link-type-stylesheet:list-remove data-x-internal=list-remove>Remove</a> <var>el</var> from <var>el</var>'s <a id=link-type-stylesheet:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a>'s <a id=link-type-stylesheet:script-blocking-style-sheet-set-2 href=semantics.html#script-blocking-style-sheet-set>script-blocking style sheet set</a>.<li><p>Return.</ol>
   <li><p>If <var>el</var> has an <a id=link-type-stylesheet:associated-css-style-sheet-2 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>, <a href=https://drafts.csswg.org/cssom/#remove-a-css-style-sheet id=link-type-stylesheet:remove-a-css-style-sheet data-x-internal=remove-a-css-style-sheet>remove the CSS style sheet</a>.<li>
    <p>If <var>success</var> is true, then:</p>

    <ol><li>
      <p><a id=link-type-stylesheet:create-a-css-style-sheet href=https://drafts.csswg.org/cssom/#create-a-css-style-sheet data-x-internal=create-a-css-style-sheet>Create a CSS style sheet</a> with the following properties:</p>

      <dl><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-type id=link-type-stylesheet:concept-css-style-sheet-type data-x-internal=concept-css-style-sheet-type>type</a><dd><p><code id=link-type-stylesheet:text/css-4><a href=indices.html#text/css>text/css</a></code><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-location id=link-type-stylesheet:concept-css-style-sheet-location data-x-internal=concept-css-style-sheet-location>location</a><dd>
        <p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url-list id=link-type-stylesheet:concept-response-url-list data-x-internal=concept-response-url-list>URL list</a>[0]</p>

        <p class=XXX>We provide a URL here on the assumption that <a href=https://github.com/w3c/csswg-drafts/issues/9316>w3c/csswg-drafts issue #9316</a> will
        be fixed.</p>
       <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-owner-node id=link-type-stylesheet:concept-css-style-sheet-owner-node data-x-internal=concept-css-style-sheet-owner-node>owner node</a><dd><p><var>el</var><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-media id=link-type-stylesheet:concept-css-style-sheet-media data-x-internal=concept-css-style-sheet-media>media</a><dd>
        <p>The <code id=link-type-stylesheet:attr-link-media-2><a href=semantics.html#attr-link-media>media</a></code> attribute of <var>el</var>.</p>

        <p class=note>This is a reference to the (possibly absent at this time) attribute, rather
        than a copy of the attribute's current value. <cite>CSSOM</cite> defines what happens
        when the attribute is dynamically set, changed, or removed.</p>
       <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-title id=link-type-stylesheet:concept-css-style-sheet-title data-x-internal=concept-css-style-sheet-title>title</a><dd>
        <p>The <code id=link-type-stylesheet:attr-link-title><a href=semantics.html#attr-link-title>title</a></code> attribute of <var>el</var>, if
        <var>el</var> is <a id=link-type-stylesheet:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, or the empty string otherwise.</p>

        <p class=note>This is similarly a reference to the attribute, rather than a copy of the
        attribute's current value.</p>
       <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-alternate-flag id=link-type-stylesheet:concept-css-style-sheet-alternate-flag data-x-internal=concept-css-style-sheet-alternate-flag>alternate flag</a><dd><p>Set if <a href=#the-link-is-an-alternative-stylesheet id=link-type-stylesheet:the-link-is-an-alternative-stylesheet-2>the link is an alternative style sheet</a> and <var>el</var>'s
       <a id=link-type-stylesheet:explicitly-enabled href=semantics.html#explicitly-enabled>explicitly enabled</a> is false; unset otherwise.<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-origin-clean-flag id=link-type-stylesheet:concept-css-style-sheet-origin-clean-flag data-x-internal=concept-css-style-sheet-origin-clean-flag>origin-clean flag</a><dd><p>Set if the resource is <a id=link-type-stylesheet:cors-same-origin href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a>; unset otherwise.<dt>
        <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-parent-css-style-sheet id=link-type-stylesheet:concept-css-style-sheet-parent-css-style-sheet data-x-internal=concept-css-style-sheet-parent-css-style-sheet>parent CSS style
        sheet</a>
       <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-owner-css-rule id=link-type-stylesheet:concept-css-style-sheet-owner-css-rule data-x-internal=concept-css-style-sheet-owner-css-rule>owner CSS rule</a><dd><p>null<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=link-type-stylesheet:concept-css-style-sheet-disabled-flag data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a><dd><p>Left at its default value.<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-css-rules id=link-type-stylesheet:concept-css-style-sheet-css-rules data-x-internal=concept-css-style-sheet-css-rules>CSS rules</a><dd>
         <p>Left uninitialized.</p>

         <p class=XXX>This doesn't seem right. Presumably we should be using <var>bodyBytes</var>?
         Tracked as <a href=https://github.com/whatwg/html/issues/2997>issue #2997</a>.</p>
        </dl>

      <p>The CSS <a id=link-type-stylesheet:environment-encoding href=https://drafts.csswg.org/css-syntax/#environment-encoding data-x-internal=environment-encoding>environment encoding</a> is the result of running the following steps:
      <a href=references.html#refsCSSSYNTAX>[CSSSYNTAX]</a></p>

      <ol><li><p>If <var>el</var> has a <code id=link-type-stylesheet:attr-link-charset><a href=obsolete.html#attr-link-charset>charset</a></code> attribute,
       <a href=https://encoding.spec.whatwg.org/#concept-encoding-get id=link-type-stylesheet:getting-an-encoding data-x-internal=getting-an-encoding>get an encoding</a> from that attribute's value. If
       that succeeds, return the resulting encoding. <a href=references.html#refsENCODING>[ENCODING]</a><li><p>Otherwise, return the <a id="link-type-stylesheet:document's-character-encoding" href=https://dom.spec.whatwg.org/#concept-document-encoding data-x-internal="document's-character-encoding">document's character encoding</a>.
       <a href=references.html#refsDOM>[DOM]</a></ol>
     <li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-stylesheet:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=link-type-stylesheet:event-load><a href=indices.html#event-load>load</a></code> at <var>el</var>.</ol>
   <li><p>Otherwise, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=link-type-stylesheet:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=link-type-stylesheet:event-error><a href=indices.html#event-error>error</a></code> at <var>el</var>.<li>
    <p>If <var>el</var> <a id=link-type-stylesheet:contributes-a-script-blocking-style-sheet-2 href=semantics.html#contributes-a-script-blocking-style-sheet>contributes a script-blocking style sheet</a>, then:</p>

    <ol><li><p><a id=link-type-stylesheet:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>el</var>'s <a id=link-type-stylesheet:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=link-type-stylesheet:script-blocking-style-sheet-set-3 href=semantics.html#script-blocking-style-sheet-set>script-blocking
     style sheet set</a> <a href=https://infra.spec.whatwg.org/#list-contain id=link-type-stylesheet:list-contains data-x-internal=list-contains>contains</a> <var>el</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=link-type-stylesheet:list-remove-2 data-x-internal=list-remove>Remove</a> <var>el</var> from its <a id=link-type-stylesheet:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a>'s <a id=link-type-stylesheet:script-blocking-style-sheet-set-4 href=semantics.html#script-blocking-style-sheet-set>script-blocking style sheet set</a>.</ol>
   <li><p><a id=link-type-stylesheet:unblock-rendering href=dom.html#unblock-rendering>Unblock rendering</a> on <var>el</var>.</ol>

  <p>The <a id=link-type-stylesheet:process-a-link-header href=semantics.html#process-a-link-header>process a link header</a> steps for this type of linked resource are to do
  nothing.</p>

  


  <h5 id=link-type-tag><span class=secno>4.6.7.24</span> Link type "<dfn data-dfn-for=a/rel,area/rel data-dfn-type=attr-value><code>tag</code></dfn>"<a href=#link-type-tag class=self-link></a></h5>

  <p>The <code id=link-type-tag:link-type-tag><a href=#link-type-tag>tag</a></code> keyword may be used with <code id=link-type-tag:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and
  <code id=link-type-tag:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements. This keyword creates a <a href=#hyperlink id=link-type-tag:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-tag:link-type-tag-2><a href=#link-type-tag>tag</a></code> keyword indicates that the <em>tag</em> that the
  referenced document represents applies to the current document.</p>

  <p class=note>Since it indicates that the tag <em>applies to the current document</em>, it would
  be inappropriate to use this keyword in the markup of a <a href=semantics-other.html#tag-cloud>tag cloud</a>, which
  lists the popular tags across a set of pages.</p>

  <div class=example>

   <p>This document is about some gems, and so it is <i>tagged</i> with "<code>https://en.wikipedia.org/wiki/Gemstone</code>" to unambiguously categorize it as applying
   to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or
   the Swiss locomotive class:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->My Precious<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>h1</c-><c- p>&gt;</c->My precious<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Summer 2012<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
   Tags: <c- p>&lt;</c-><c- f>a</c-> <c- e>rel</c-><c- o>=</c-><c- s>tag</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://en.wikipedia.org/wiki/Gemstone&quot;</c-><c- p>&gt;</c->Gemstone<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In <em>this</em> document, there are two articles. The "<code id=link-type-tag:link-type-tag-3><a href=#link-type-tag>tag</a></code>"
   link, however, applies to the whole page (and would do so wherever it was placed, including if it
   was within the <code id=link-type-tag:the-article-element><a href=sections.html#the-article-element>article</a></code> elements).</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Gem 4/4<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->801: Steinbock<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->802: Murmeltier<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg&quot;</c->
         <c- e>alt</c-><c- o>=</c-><c- s>&quot;The 802 was red with pantographs and tall vents on the side.&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->The 802 in the 1980s, above Lago Bianco.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;topic&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>rel</c-><c- o>=</c-><c- s>tag</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4&quot;</c-><c- p>&gt;</c->Gem 4/4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h5 id=link-type-terms-of-service><span class=secno>4.6.7.25</span> Link Type "<dfn data-dfn-for=link/rel,a/rel,area/rel data-dfn-type=attr-value><code>terms-of-service</code></dfn>"<a href=#link-type-terms-of-service class=self-link></a></h5>

  <p>The <code id=link-type-terms-of-service:link-type-terms-of-service><a href=#link-type-terms-of-service>terms-of-service</a></code> keyword may be used with
  <code id=link-type-terms-of-service:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=link-type-terms-of-service:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=link-type-terms-of-service:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-terms-of-service:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-terms-of-service:link-type-terms-of-service-2><a href=#link-type-terms-of-service>terms-of-service</a></code> keyword indicates that the
  referenced document contains information about the agreements between the current document's
  provider and users who wish to use the current document, as described in more detail in
  <cite>Additional Link Relation Types</cite>. <a href=references.html#refsRFC6903>[RFC6903]</a></p>


  <h5 id=sequential-link-types><span class=secno>4.6.7.26</span> Sequential link types<a href=#sequential-link-types class=self-link></a></h5>

  <p>Some documents form part of a sequence of documents.</p>

  <p>A sequence of documents is one where each document can have a <em>previous sibling</em> and a
  <em>next sibling</em>. A document with no previous sibling is the start of its sequence, a
  document with no next sibling is the end of its sequence.</p>

  <p>A document may be part of multiple sequences.</p>


  <h6 id=link-type-next><span class=secno>4.6.7.26.1</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel,form/rel data-dfn-type=attr-value><code>next</code></dfn>"<a href=#link-type-next class=self-link></a></h6>

  <p>The <code id=link-type-next:link-type-next><a href=#link-type-next>next</a></code> keyword may be used with <code id=link-type-next:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-next:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-next:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-next:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-next:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-next:link-type-next-2><a href=#link-type-next>next</a></code> keyword indicates that the document is part of a
  sequence, and that the link is leading to the document that is the next logical document in the
  sequence.</p>

  <p>When the <code id=link-type-next:link-type-next-3><a href=#link-type-next>next</a></code> keyword is used with a <code id=link-type-next:the-link-element-2><a href=semantics.html#the-link-element>link</a></code>
  element, user agents should process such links as if they were using one of the <code id=link-type-next:link-type-dns-prefetch><a href=#link-type-dns-prefetch>dns-prefetch</a></code>, <code id=link-type-next:link-type-preconnect><a href=#link-type-preconnect>preconnect</a></code>, or
  <code id=link-type-next:link-type-prefetch><a href=#link-type-prefetch>prefetch</a></code> keywords. Which keyword the user agent wishes to use
  is implementation-dependent; for example, a user agent may wish to use the less-costly <code id=link-type-next:link-type-preconnect-2><a href=#link-type-preconnect>preconnect</a></code> processing model when trying to conserve data, battery
  power, or processing power, or may wish to pick a keyword depending on heuristic analysis of past
  user behavior in similar scenarios.</p>

  <h6 id=link-type-prev><span class=secno>4.6.7.26.2</span> Link type "<dfn data-dfn-for=link/rel,a/rel,area/rel,form/rel data-dfn-type=attr-value><code>prev</code></dfn>"<a href=#link-type-prev class=self-link></a></h6>

  <p>The <code id=link-type-prev:link-type-prev><a href=#link-type-prev>prev</a></code> keyword may be used with <code id=link-type-prev:the-link-element><a href=semantics.html#the-link-element>link</a></code>,
  <code id=link-type-prev:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=link-type-prev:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, and <code id=link-type-prev:the-form-element><a href=forms.html#the-form-element>form</a></code> elements. This keyword creates a
  <a href=#hyperlink id=link-type-prev:hyperlink>hyperlink</a>.</p>

  <p>The <code id=link-type-prev:link-type-prev-2><a href=#link-type-prev>prev</a></code> keyword indicates that the document is part of a
  sequence, and that the link is leading to the document that is the previous logical document in
  the sequence.</p>

  

  <p><strong>Synonyms</strong>: For historical reasons, user agents must also treat the keyword
  "<code>previous</code>" like the <code id=link-type-prev:link-type-prev-3><a href=#link-type-prev>prev</a></code> keyword.</p>

  


  <h5 id=other-link-types><span class=secno>4.6.7.27</span> Other link types<a href=#other-link-types class=self-link></a></h5>

  <p><dfn id=concept-rel-extensions>Extensions to the predefined set of link types</dfn> may
  be registered on the <a href=https://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions>microformats
  page for existing rel values</a>. <a href=references.html#refsMFREL>[MFREL]</a></p>

  <p>Anyone is free to edit the <span>microformats page for existing rel values</span> at
  any time to add a type. Extension types must be specified with the following information:</p>

  <dl><dt>Keyword<dd>
    <p>The actual value being defined. The value should not be confusingly similar to any other
    defined value (e.g. differing only in case).</p>

    <p>If the value contains a U+003A COLON character (:), it must also be an <a id=other-link-types:absolute-url href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute
    URL</a>.</p>
   <dt>Effect on... <code id=other-link-types:the-link-element><a href=semantics.html#the-link-element>link</a></code><dd>
    <p>One of the following:</p>

    <dl><dt>Not allowed<dd>The keyword must not be specified on <code id=other-link-types:the-link-element-2><a href=semantics.html#the-link-element>link</a></code> elements.<dt>Hyperlink<dd>The keyword may be specified on a <code id=other-link-types:the-link-element-3><a href=semantics.html#the-link-element>link</a></code> element; it creates a
     <a href=#hyperlink id=other-link-types:hyperlink>hyperlink</a>.<dt>External Resource<dd>The keyword may be specified on a <code id=other-link-types:the-link-element-4><a href=semantics.html#the-link-element>link</a></code> element; it creates an <a href=#external-resource-link id=other-link-types:external-resource-link>external
     resource link</a>.</dl>
   <dt>Effect on... <code id=other-link-types:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=other-link-types:the-area-element><a href=image-maps.html#the-area-element>area</a></code><dd>
    <p>One of the following:</p>

    <dl><dt>Not allowed<dd>The keyword must not be specified on <code id=other-link-types:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=other-link-types:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements.<dt>Hyperlink<dd>The keyword may be specified on <code id=other-link-types:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=other-link-types:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> elements; it creates a
     <a href=#hyperlink id=other-link-types:hyperlink-2>hyperlink</a>.<dt>External Resource<dd>The keyword may be specified on <code id=other-link-types:the-a-element-4><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=other-link-types:the-area-element-4><a href=image-maps.html#the-area-element>area</a></code> elements; it creates
     an <a href=#external-resource-link id=other-link-types:external-resource-link-2>external resource link</a>.<dt>Hyperlink Annotation<dd>The keyword may be specified on <code id=other-link-types:the-a-element-5><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=other-link-types:the-area-element-5><a href=image-maps.html#the-area-element>area</a></code> elements; it <a href=#hyperlink-annotation id=other-link-types:hyperlink-annotation>annotates</a> other <a href=#hyperlink id=other-link-types:hyperlink-3>hyperlinks</a>
     created by the element.</dl>
   <dt>Effect on... <code id=other-link-types:the-form-element><a href=forms.html#the-form-element>form</a></code><dd>
    <p>One of the following:</p>

    <dl><dt>Not allowed<dd>The keyword must not be specified on <code id=other-link-types:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements.<dt>Hyperlink<dd>The keyword may be specified on <code id=other-link-types:the-form-element-3><a href=forms.html#the-form-element>form</a></code> elements; it creates a
     <a href=#hyperlink id=other-link-types:hyperlink-4>hyperlink</a>.<dt>External Resource<dd>The keyword may be specified on <code id=other-link-types:the-form-element-4><a href=forms.html#the-form-element>form</a></code> elements; it creates an <a href=#external-resource-link id=other-link-types:external-resource-link-3>external
     resource link</a>.<dt>Hyperlink Annotation<dd>The keyword may be specified on <code id=other-link-types:the-form-element-5><a href=forms.html#the-form-element>form</a></code> elements; it <a href=#hyperlink-annotation id=other-link-types:hyperlink-annotation-2>annotates</a> other <a href=#hyperlink id=other-link-types:hyperlink-5>hyperlinks</a> created by the
     element.</dl>
   <dt>Brief description<dd><p>A short non-normative description of what the keyword's meaning is.<dt>Specification<dd><p>A link to a more detailed description of the keyword's semantics and requirements. It
   could be another page on the wiki, or a link to an external page.<dt>Synonyms<dd><p>A list of other keyword values that have exactly the same processing requirements. Authors
   should not use the values defined to be synonyms, they are only intended to allow user agents to
   support legacy content. Anyone may remove synonyms that are not used in practice; only names that
   need to be processed as synonyms for compatibility with legacy content are to be registered in
   this way.<dt>Status<dd>
    <p>One of the following:</p>

    <dl><dt>Proposed<dd>The keyword has not received wide peer review and approval. Someone has proposed it and is,
     or soon will be, using it.<dt>Ratified<dd>The keyword has received wide peer review and approval. It has a specification that
     unambiguously defines how to handle pages that use the keyword, including when they use it in
     incorrect ways.<dt>Discontinued<dd>The keyword has received wide peer review and it has been found wanting. Existing pages are
     using this keyword, but new pages should avoid it. The "brief description" and "specification"
     entries will give details of what authors should use instead, if anything.</dl>

    <p>If a keyword is found to be redundant with existing values, it should be removed and listed
    as a synonym for the existing value.</p>

    <p>If a keyword is registered in the "proposed" state for a period of a month or more without
    being used or specified, then it may be removed from the registry.</p>

    <p>If a keyword is added with the "proposed" status and found to be redundant with existing
    values, it should be removed and listed as a synonym for the existing value. If a keyword is
    added with the "proposed" status and found to be harmful, then it should be changed to
    "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so in accordance with the
    definitions above.</p>
   </dl>

  

  <p>Conformance checkers must use the information given on the <span>microformats page
  for existing rel values</span> to establish if a value is allowed or not: values defined in this
  specification or marked as "proposed" or "ratified" must be accepted when used on the elements for
  which they apply as described in the "Effect on..." field, whereas values marked as "discontinued"
  or not listed in either this specification or on the aforementioned page must be rejected as
  invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid
  the use of unreliable network connectivity).</p>

  <p>When an author uses a new type not defined by either this specification or the wiki page,
  conformance checkers should offer to add the value to the wiki, with the details described above,
  with the "proposed" status.</p>

  

  <p>Types defined as extensions in the <a href=https://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions>microformats
  page for existing rel values</a> with the status "proposed" or "ratified" may be used with the
  <code>rel</code> attribute on <code id=other-link-types:the-link-element-5><a href=semantics.html#the-link-element>link</a></code>, <code id=other-link-types:the-a-element-6><a href=text-level-semantics.html#the-a-element>a</a></code>, and <code id=other-link-types:the-area-element-6><a href=image-maps.html#the-area-element>area</a></code>
  elements in accordance to the "Effect on..." field. <a href=references.html#refsMFREL>[MFREL]</a></p>



  <nav><a href=text-level-semantics.html>← 4.5 Text-level semantics</a> — <a href=index.html>Table of Contents</a> — <a href=edits.html>4.7 Edits →</a></nav>
